思洋互动网站建设学前班

第五步：平滑过渡和添加颜色

第四步的特效，看起来有些生硬，我们可以添加Transition来达到平滑动画的效果，另外颜色比较单一，我们可以设置一下不同的颜色，首先在ul->li->a里添加Transition：
广州网站建设,网站建设,广州网页设计,广州网站设计

1. -moz-transition:-moz-transform .15s linear;  
2. -o-transition  -transform .15s linear;  
3. -webkit-transition:-webkit-transform .15s linear;  

然后在even和3n里定义不同的颜色

1. ul li:nth-child(even) a{  
2. -o-transform:rotate(4deg);  
3. -webkit-transform:rotate(4deg);  
4. -moz-transform:rotate(4deg);  
5. position:relative;  
6. top:5px;  
7. background:#cfc  ;  
8. }  
9. ul li:nth-child(3n) a{  
10. -o-transform:rotate(-3deg);  
11. -webkit-transform:rotate(-3deg);  
12. -moz-transform:rotate(-3deg);  
13. position:relative;  
14. top:-5px;  
15. background:#ccf  ;  
16. }  

这样，就完成了我们最终的效果

总结

至此，我们利用了HTML5和CSS3的基本特性做成了一个还不错的便签贴效果，HTML5/CSS3确实很强大，如果在加一些高级特性，比如和JavaScript结合起来，能实现更加牛逼的效果，从当耐特砖家给大家的HTML5实验室系列文章，就可以看出来了。

原文链接：http://www.mhtml5.com/2012/05/4975.html