当青训营遇上码上掘金

项目意义

  名片是一个人在社会生活上的身份象征，在现如今的社会生活中，有很多场合都需要用到名片，可以起到“自我介绍”的功能，充当的就是一个人在社会成员中的代表，是在社会形式上的一种身份象征。
  作为一名程序员用代码做自我介绍是一件非常酷炫的事情。

代码简释

  我这写的名片分为三大模块:

1. 最外层的一块a
2. 文字一大块b
3. 平面圆柱一块c

HTML

  平面圆柱一块c 中的

• i 是用来计算平面圆柱的动效延迟和距离的。
• w 则是用来计算平面圆柱的宽度。
  
• f 是设置二维码。

CSS

• 鼠标放开时的动画通过transition: .5s 1s;设置在CSS中第30行、第35行、第55行、第73行、第77行、第81行，其中第一个值是动画的过渡时间，第二个值是延迟一秒后执行动画。
• 延迟动画通过transition: .5s calc(var(--i)*.1s);设置在CSS中第67行。
• 移动的轨迹通过transform: rotateZ(220deg) translate(-200px,400px);设置在CSS中第68行。
• 二维码使用图床设置在CSS中第86行。
  关于图床，我使用的是聚合图床，官网地址：www.superbed.cn
  聚合图床的优点：免费，可以把图片分发到几个不同的地方备份，网站本身自有CDN功能，可以节省不少服务器的流量，不用担心图片被胡乱删掉，支持注册和匿名管理，还没有图片上传大小的限制。

基础知识

transition属性

  transition 属性是一个简写属性，用于设置四个过渡属性：

• transition-property 规定设置过渡效果的 CSS 属性的名称。
• transition-duration 规定完成过渡效果需要多少秒或毫秒。
• transition-timing-function 规定速度效果的速度曲线。
• transition-delay 定义过渡效果何时开始。

默认值： all 0 ease 0

注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

solid

  solid的意思为“实心的”，是css border-style属性的一个属性值，表示“实线”；
  将border-style属性的值设置为“solid”可以定义实线边框。

rotateZ()函数

  rotateZ()函数是一个内置函数，用于使元素绕z轴旋转。
用法:rotateZ( angle )
参数：该功能接受代表旋转角度的单个参数角度。正角和负角分别使元素顺时针和逆时针旋转。

translate()

  在CSS3中，可以使用translate()方法将元素沿着水平方向（X轴）和垂直方向（Y轴）移动。 对于位移translate()方法，我们分为3种情况：

• ranslateX(x)：元素仅在水平方向移动（X轴移动）

• translateY(y)：元素仅在垂直方向移动（Y轴移动）

• transklate(x,y)：元素在水平方向和垂直方向同时移动（X轴和Y轴同时移动）