CSS3的功能非常强大，配合现代浏览器可以做出赏心悦目的效果，这几天逛网站，参考了一些效果，顺手做了一个。Firefox浏览器可以看到最佳效果，原因下面会讲到，以下是效果预览：
首先写好页面基本的html代码，图片都是网上找的：
1 <ul> 2 <li> 3 <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/f2fcb01.jpg" alt=""></a> 4 </li> 5 <li> 6 <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/b8def93.jpg" alt=""></a> 7 </li> 8 <li> 9 <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/f2fcb02.jpg" alt=""></a> 10 </li> 11 <li> 12 <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/e16ac0.jpg" alt=""></a> 13 </li> 14 <li> 15 <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/261f104.jpg" alt=""></a> 16 </li> 17 <li> 18 <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/261f102.jpg" alt=""></a> 19 </li> 20 <li> 21 <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/32e0012.jpg" alt=""></a> 22 </li> 23 <li> 24 <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/32e0011.jpg" alt=""></a> 25 </li> 26 </ul>
是一个基本的ul、li布局，效果的实现重点是下面的css代码：
1 body{ 2 background-color:#ddd; 3 margin:0 4 } 5 .wrapper{ 6 margin:100px auto; 7 width:960px 8 } 9 ul{ 10 margin:0; 11 list-style:none; 12 padding:0 13 } 14 img{ 15 border:0; 16 vertical-align:bottom 17 } 18 ul li{ 19 float:left; 20 margin:5%; 21 position:relative; 22 width:140px; 23 z-index:10 24 } 25 ul li img{ 26 position:relative; 27 z-index:10 28 } 29 ul li img{ 30 -moz-box-sizing:border-box; 31 -webkit-box-sizing:border-box; 32 box-sizing:border-box; 33 border:10px solid #fff; 34 border-radius:3px; 35 box-shadow:0 1px 5px rgba(0,0,0,.5) 36 } 37 ul li:before,ul li:after{ 38 -moz-box-sizing:border-box; 39 -moz-transition:all .3s ease-out 0s; 40 -webkit-box-sizing:border-box; 41 -webkit-transition:all .3s ease-out 0s; 42 -o-transtion:all .8s ease-out 0s; 43 box-sizing:border-box; 44 border:10px solid #fff; 45 border-radius:3px; 46 box-shadow:0 1px 5px rgba(0,0,0,0.5); 47 content:""; 48 height:100%; 49 left:0; 50 position:absolute; 51 width:100% 52 } 53 ul li:before{ 54 -moz-transform:rotate(2deg); 55 -moz-transform-origin:left bottom; 56 -webkit-transform:rotate(2deg); 57 -webkit-transform-origin:left bottom; 58 -o-transform:rotate(2deg); 59 -o-transform-origin:left bottom; 60 top:4px; 61 z-index:-5 62 } 63 ul li:after{ 64 -moz-transform:rotate(4deg); 65 -moz-transform-origin:left bottom; 66 -webkit-transform:rotate(4deg); 67 -webkit-transform-origin:left bottom; 68 -o-transform:rotate(4deg); 69 -o-transform-origin:left bottom; 70 top:8px; 71 z-index:-10 72 } 73 ul li:hover:before,ul li:hover:after{ 74 -moz-transform:rotate(0deg); 75 -webkit-transform:rotate(0deg); 76 -o-transform:rotate(0deg) 77 } 78 ul li:nth-child(even):before,ul li:nth-child(even):after{ 79 top:0; 80 -moz-transform:rotate(0deg); 81 -webkit-transform:rotate(0deg); 82 -o-transform:rotate(0deg) 83 } 84 ul li:nth-child(even):hover:before{ 85 top:4px; 86 -moz-transform:rotate(2deg); 87 -webkit-transform:rotate(2deg); 88 -o-transform:rotate(2deg) 89 } 90 ul li:nth-child(even):hover:after{ 91 top:8px; 92 -moz-transform:rotate(4deg); 93 -webkit-transform:rotate(4deg); 94 -o-transform:rotate(4deg) 95 } 96 ul li:first-child:before{ 97 top:4px; 98 -moz-transform:rotate(-4deg); 99 -webkit-transform:rotate(-4deg); 100 -o-transform:rotate(-4deg) 101 } 102 ul li:first-child:after{ 103 top:8px; 104 -moz-transform:rotate(-8deg); 105 -webkit-transform:rotate(-8deg); 106 -o-transform:rotate(-8deg) 107 } 108 ul li:first-child:hover:before,ul li:first-child:hover:after{ 109 top:0; 110 -moz-transform:rotate(0); 111 -webkit-transform:rotate(0); 112 -o-transform:rotate(0) 113 }
这个效果主要用到了css3中的transition和transform，另外还用到了:before和:after伪类。
除了Firefox外，其余浏览器经过测试都不支持:before和:hover伪类的动画效果，所以在鼠标经过时的过渡动画看不到。
完整代码：PhotoShow
转载请注明出处。