采用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"> 8body,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}5960 </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效果
如果觉得《css动画制作挂图效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
