思洋互动网站建设学前班

第四步：Hover和Focus时放缩正方形

想在hover和focus的时候达到缩放的效果，我们需要添加如下代码：

1. ul li a:hover,ul li a:focus{    
2.   -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);    
3.   -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);    
4.   box-shadow:10px 10px 7px rgba(0,0,0,.7);    
5.   -webkit-transform: scale(1.25);    
6.   -moz-transform: scale(1.25);    
7.   -o-transform: scale(1.25);    
8.   position:relative;    
9.   z-index:5;    
10. }  

设置z-index为5是为了让正方形在放大的时候盖住其它的正方形，同时因为也设置了focus，所以也支持Tab键切换访问，效果如下：

广州网站建设,网站建设,广州网页设计,广州网站设计

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

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

1. -moz-transition:-moz-transform .15s linear;    
2.  -o-transition:-o-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实验室系列文章，就可以看出来了。