首先添加基本的HTML结构以及构建基本的正方形，代码如下： XML/HTML Code复制内容到剪贴板 1.
- 2.
- 3.
Dudu：
4.最近咋没有美女发帖呢？我一定给个头条推荐,recommend!recommend!
5. 6. - 7.
汤姆大叔：
8.Team的一个成员去了Microsoft做SDE3，又得hire new member了
9. 10. - 11.
技术弟弟：
12.O2DS和我翻译的书是一样，我一定要比他翻得快, 晚上加班翻,fast! fast! fast!
13. 14. - 15.
Artech：
16.WCF的帖子真是少，看来我得多发点帖子让大家学习呢
17. 18. - 19.
吉日嘎拉：
20.将权限管理、工作流管理做到我能力的极致，一个人只能做好那么很少的几件事情
21. 22. - 23.
某武林高手：
24.低于25000块的面试再也不去了，它grandma的
25. 26.
这一步，是我们要实现正方形的阴影效果，并且将字体改为草体(仅限英文)，由于google提供了Font API的支持，所以我们可以直接使用了，首先添加对Google API的调用： 查看原始代码 XML/HTML Code复制内容到剪贴板 1. 然后设置引用这个字体：查看原始代码 XML/HTML Code复制内容到剪贴板 1.ul li h2 2.{ 3.font-size: 140%; 4.font-weight: bold; 5.padding-bottom: 10px; 6.} 7.ul li p 8.{ 9.font-family: “Reenie Beanie” ,arial,sans-serif,微软雅黑; 10.font-size: 110%; 11.} 关于阴影，由于各个浏览器还都不完全支持，所以需要分别处理，代码如下：查看原始代码 XML/HTML Code复制内容到剪贴板 1.ul li a 2.{ 3.text-decoration: none; 4.color: #000 ; 5.background: #ffc ; 6.display: block; 7.height: 10em; 8.width: 10em; 9.padding: 1em; /* Firefox */ 10.-moz-box-shadow: 5px 5px 7px rgba(33,33,33,1) ; /* Safari+Chrome */ 11.-webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7) ; /* Opera */ 12.box-shadow: 5px 5px 7px rgba(33,33,33,.7) ; 13.} 效果如下： END
为了让正方形倾斜，我们需要在li->a里添加如下代码： 查看原始代 XML/HTML Code复制内容到剪贴板 1.ul li a{ 2.-webkit-transform:rotate(-6deg); 3.-o-transform:rotate(-6deg); 4.-moz-transform:rotate(-6deg); 5.} 但是为了能让正方形随机倾斜，而不是全部都倾斜，我们需要使用新的CSS3选择器，让正方形在每2个倾斜4个deg，每3个倾斜负3个deg,每5个倾斜5个deg：查看原始代码 CSS Code复制内容到剪贴板 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.} 8.ul li:nth-child(3n) a{ 9.-o-transform:rotate(-3deg); 10.-webkit-transform:rotate(-3deg); 11.-moz-transform:rotate(-3deg); 12.position:relative; 13.top:-5px; 14.} 15.ul li:nth-child(5n) a{ 16.-o-transform:rotate(5deg); 17.-webkit-transform:rotate(5deg); 18.-moz-transform:rotate(5deg); 19.position:relative; 20.top:-10px; 21.} 效果如下： END
想在hover和focus的时候达到缩放的效果，我们需要添加如下代码： 查看原始代码 CSS Code复制内容到剪贴板 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键切换访问，效果如下： END
第四步的特效，看起来有些生硬，我们可以添加Transition来达到平滑动画的效果，另外颜色比较单一，我们可以设置一下不同的颜色，首先在ul->li->a里添加Transition： 查看原始代码CSS Code复制内容到剪贴板 1.-moz-transition:-moz-transform .15s linear; 2.-o-transition:-o-transform .15s linear; 3.-webkit-transition:-webkit-transform .15s linear; 然后在even和3n里定义不同的颜色：查看原始代码 CSS Code复制内容到剪贴板 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.} 这样，就完成了我们最终的效果： END