看了站长的直播之后，瞬间觉得世界真奇妙。为什么有如此美丽的女子（(⊙o⊙)…）。
让我想为站长吟诗作曲一首：
云想衣裳花想容，春风拂槛露华浓。
若非群玉山头见，会向瑶台月下逢。
我自己都笑了，哈哈哈哈，不调戏站长了，我们言归正传。昨天在逛掘金-我的主页时，发现一个掘金的彩蛋。觉得很有意思哈。
爱的魔力转圈圈，
想你想到心花怒放黑夜白天，
可是我害怕爱情只是一瞬间，
转眼会不见，
我要慢慢冒险。
出于好奇，我就想看看掘金怎么实现的，原来几行非常简单的css就实现了这个好玩的彩蛋。
下面我们来认识一下这段代码的CSS。
.user-info-block .avatar:hover{ transform: rotate(666turn); transition-delay: 1s; transition-property: all; transition-duration: 59s; transition-timing-function: cubic-bezier(.34,0,.84,1); }
一、transform
1. 描述
MDN：CSStransform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。
2. 语法
transform: none|transform-functions;
| 值 | 描述 |
| none | 定义不进行转换。 |
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate(x,y) | 定义 2D 转换。 |
| translate3d(x,y,z) | 定义 3D 转换。 |
| translateX(x) | 定义转换，只是用 X 轴的值。 |
| translateY(y) | 定义转换，只是用 Y 轴的值。 |
| translateZ(z) | 定义 3D 转换，只是用 Z 轴的值。 |
| scale(x,y) | 定义 2D 缩放转换。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 |
| scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 |
| scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
| skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 |
| skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 |
| skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 |
| perspective(n) | 为 3D 转换元素定义透视视图。 |
3. 兼容性
2D Transforms
3D Transforms
4. rotate(666turn)
1turn = 360°
666true = 666*360°
一、transition-delay
1. 描述
CSS的transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。
2. 语法
transition-delay: time;
| 值 | 描述 |
| time | 规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。 |
3. 兼容性
4. transition-delay: 1s
过渡效果开始之前等待1秒
三、transition-property
1. 描述
transition-property 指定应用过渡属性的名称。
2. 语法
transition-property: none|all|property;
| 值 | 描述 |
| none | 没有属性会获得过渡效果。 |
| all | 所有属性都将获得过渡效果。 |
| property | 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。 |
3. 兼容性
CSS property: transition-property
CSS property: transition-property: IDENT value
4. transition-property: all
为所有属性定义过渡效果。
四、 transition-duration
1. 描述
transition-duration 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画。
2. 语法
transition-duration: time;
| 值 | 描述 |
| time | 规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，意味着不会有效果。 |
3. 兼容性
4. transition-duration: 59s
过渡动画所需的时间为59s。
五、 transition-timing-function
1. 描述
CSS属性受到 transition effect的影响，会产生不断变化的中间值，而 CSS transition-timing-function 属性用来描述这个中间值是怎样计算的。实质上，通过这个函数会建立一条加速度曲线，因此在整个transition变化过程中，变化速度可以不断改变。
2. 语法
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic- bezier(n,n,n,n);
| 值 | 描述 |
| linear | 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 |
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 |
| ease-in | 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 |
| ease-out | 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out | 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
3. 兼容性
CSS property: transition-timing-function
CSS property: transition-timing-function: jump- keywords for steps()
4. cubic-bezier(.34,0,.84,1)
在 cubic-bezier 函数中定义自己的值。 cubic-bezier称为三次贝塞尔曲线，主要是生成速度曲线的函数，规定是cubic-bezier(,,,) .
从上图中我们可以看到，cubic-bezier有四个点：
两个默认的，即：P0(0,0)，P3(1,1);
两个控制点，即：P1(x1,y1)，P2(x2,y2);
注：X轴的范围是0~1，超出cubic-bezier将失效，Y轴的取值没有规定，但是也不宜过大。 我们只要调整两个控制点P1和P2的坐标，最后形成的曲线就是动画曲线。
六、总结
.user-info-block .avatar:hover{ transform: rotate(666turn); transition-delay: 1s; transition-property: all; transition-duration: 59s; transition-timing-function: cubic-bezier(.34,0,.84,1); }
这些属性组合起来就实现了掘金的小彩蛋，爱的魔力转圈圈。看彩蛋的同时还学习了几个简单CSS3属性，站长萌萌哒~~~
