CSS3 transition属性和Hover效果

难得有点时间写点东西

前段时间仿造阿里前辈张秋怡的一个个人简历，不过遇到一点小问题。当鼠标移动到超链接触发hover的时候，会有个变色的效果

稍微查了下资料，发现用的是CSS3 transition的属性达成的

w3cschool上其实有很详细的基本属性内容：

transition:【属性】【变换延续的时间 】【速率】

属性怎么理解…假如有一个div宽度是200px

.div{width:200px;}，如果要设置移动上去后变成400px宽度，直接在:hover后面加上

.div:hover{transition:400px 1slinear}就可以了，第二个时间是设置从开始增加宽度到增加400px的耗时。第三个属性可以理解为变换的速率，直接摘抄w3c的内容：

1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

所以当属性填写为color有关的内容的时候，图上的渐变效果就直接出来了。这就是Css3关于transition的用法