当青训营遇上码上掘金...

名片设计

共有两层渐变色的背景，两层渐变的轴向不同，且外层大，里层小，里层叠放于外层的中间，将外层大于里层的部分看作里层的边框，里层用于放置内容。
点击按钮呈现名片内容。
名片内容仿照仙剑3中雪见的人物出场介绍。

渐变

css中设置渐变背景，共有五种形式，其中有三种基础形式：线性渐变、径向渐变、锥形渐变，这里主要介绍前两种~

• 线性渐变
  颜色值沿着一条隐式的直线逐渐过渡。
  语法：background-image:linear-gradient(direction,color1,color2,...);
  
  • direction表示渐变方向
    -to bottom/180deg：从上到下，默认
    -to top/0deg：从下到上
    -to left/-90deg：从右到左
    -to right/90deg：从左到右...
  • 渐变时按照color1、color2...的顺序渐变，第一个颜色默认出现在梯度0%(即一开始)，最后一个颜色默认出现在梯度100%(即最后)，中间出现的颜色可以用百分数手动设置出现在梯度的位置
• 径向渐变
  颜色值由一个中心点（原点）向外以圆或者椭圆的形式扩散并逐渐过渡到其他颜色值。
  语法：background-image:radial-gradient(point-position,color1,color2,...);
  
  • point-direction表示中心点的位置
    -circle at center：图形正中，以圆的形式扩散，默认
    -circle(ellipse) at 0%：图形左边界中点，以圆(椭圆)的形式扩散
    -circle(ellipse) at 100%：图形右边界中点，以圆(椭圆)的形式扩散
    -circle(ellipse) at top：图形上边界中点，以圆(椭圆)的形式扩散
    -circle(ellipse) at bottom：图形下边界中点，以圆(椭圆)的形式扩散...
  • 渐变的规律与线性渐变类似，在此不过多赘述

页面切换

这里没有使用<a>标签进行页面跳转，点击按钮前后都是在同一个页面上，是利用js在按钮按下的动作中改变了控件的class属性，从而改变了赋予控件的样式。
将按钮的样式替换为display:none;，实现了按钮的消失；切换visibility样式的值(hidden→visible)，实现了名片内容的隐藏和显现。