在(绿色通道)我们用transition属性制作了第一个小动画。
从B格上讲，不得不佩服，这是HTML5的时代！
如果你还不知道，为什麽Flashisgoingtodie？
请看?
（猛戳图片即可查看）
这次，继续在上面的特效上进行升级，修改超链接样式、transition动画速度曲线属性。
样式代码
body{
margin-top:px;
margin-left:px;
}
a{
color:#FFF;
font-size:33px;
text-decoration:none;
font-family:STFangsong;
display:block;
width:px;
height:66px;
border:1pxsolid#FF;
line-height:66px;
border-radius:6px;
}
a:hover{
color:#00AA00;
background:#;
}
a{
transition:all1.9s;
}
效果图：
修改圆角矩形边框，宽高不做解释。
line-height属性设置行高，因为加了66px像素的height，所以为了显示效果更佳，设置框内部行高。
当鼠标滑过（hover被触发），background变为黑色背景，color其实就是字体颜色变为绿色。
transition属性，还有几个值：
ease
linear
ease-in
ease-out
ease-in-out
cubic-bezier
默认属性值，逐渐变慢
匀速
加速
减速
加速然后减速
该值允许你去自定义
一个时间曲线
示意图：
设置一个ease-in-out练练手：
a{
transition:all1.9sease-in-out;
}
效果图：
看到了吗，鼠标拖入加速，移出后减速。
还可以分别设置color和background时间，注意要用“,”分开
a{
transition:color.6s,background1.2sease-in-out;
}
效果图：
color时间设置为0.6s，background1.2s，所以会出现“滞后”效果。
此外color只执行0.6s，然后字体颜色回复为初始设置的白色。
墙裂建议订阅专辑：
HTML5-庖丁解牛
戳原文，更有料！预览时标签不可点收录于合集#个上一篇下一篇