采用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>实现比较简单：点击查看效果——唉，没服务器，用的别的平台，那个平台挂了，暂时上不来链接了。
css动画制作挂图效果
原文地址：https://www.cnblogs.com/wxhhts/p/9490693.html