采用css 的动画制作一个简单的挂图。直接上代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>动画挂图</title> 6 </head> 7 <style type="text/css"> 8 body,ul{ 9 padding: 0; 10 margin: 0; 11 } 12 .pic{ 13 width: 1200px; 14 height: 250px; 15 margin: 0 auto; 16 } 17 .pic ul{ 18 width: 1200px; 19 height: 250px; 20 list-style: none; 21 margin-top: 100px; 22 } 23 .pic ul li{ 24 float: left; 25 list-style: none; 26 width: 150px; 27 height: 180px; 28 margin-left:80px ; 29 /* border: 1px solid red;*/ 30 text-align: center; 31 color: #333333; 32 -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); //阴影 33 -o-box-shadow:0 3px 6px rgba(0,0,0,.25) ; 34 -moz-box-shadow:0 3px 6px rgba(0,0,0,.25) ; 35 box-shadow: 0 3px 6px rgba(0,0,0,.25); 36 } 37 .pic ul li img{ 38 width: 100px; 39 height: 100px; 40 margin:25px 20px; 41 list-style: none; 42 margin-bottom: 12px; 43 } 44 .pic ul li{ 45 transition: all .75s; 46 transform: rotate(20deg); 47 } 48 .pic ul li:hover{ 49 transition: all .75s; 50 transform: rotate(0deg);//倾斜 51 transform: scale(1.5);//缩放 52 box-shadow: 5px 1px 5px #999999; 53 border-left: 1px solid #cccccc; 54 color: #000; 55 } 56 .pic ul li:after{ 57 content: "好风景";//添加文字 58 } 59 60 </style> 61 <body> 62 <div class="pic"> 63 <ul> 64 <li><a href="#"><img src="img/a.jpg" alt="pic1"></a></li> 65 <li><a href="#"><img src="img/b.jpg" alt="pic2"></a></li> 66 <li><a href="#"><img src="img/c.jpg" alt="pic3"></a></li> 67 <li><a href="#"><img src="img/d.jpg" alt="pic4"></a></li> 68 </ul> 69 </div> 70 </body> 71 </html>
实现比较简单：点击查看demo效果