1 <!doctype html>
2 <html lang="zh-cn">
3 <head>
4 <meta charset="UTF-8">
5 <title>纯css写的一个手风琴效果供大家学习</title>
6 <style>
7 * { margin: 0; padding: 0; }
8 body{background: #eee}
9 .e-warp { width: 600px; height: 250px; overflow: hidden; margin: 100px auto; border-radius: 5px; box-shadow: 0 0 10px #999; }
10 .e-warp li{ float: left; width: 120px; height: 100%; box-shadow: 0 0 5px rgba(0,0,0,0.5); list-style: none; width: 50px;
11 -webkit-transition:width 0.5s ease-out;
12 -moz-transition:width 0.5s ease-out;
13 transition:width 0.5s ease-out;
14 }
15 .e-warp li:first-child { width: 400px; }
16 .e-warp li:hover { width: 400px; }
17 .e-warp:hover li:not(:hover) { width: 50px; }
18 </style>
19 </head>
20 <body>
21 <ul class="e-warp">
22 <li><a href="#"><img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAveS5waG90by5xcS5jb20vaW1nP3M9NEJzZkNKeDZHJmFtcDtsPXkuanBn.jpg" alt="e-"/></a></li>
23 <li><a href="#"><img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAveS5waG90by5xcS5jb20vaW1nP3M9TXNVRmFHZDFrJmFtcDtsPXkuanBn.jpg" alt="e-"/></a></li>
24 <li><a href="#"><img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAveS5waG90by5xcS5jb20vaW1nP3M9RHZJUW5hT096JmFtcDtsPXkuanBn.jpg" alt="e-"/></a></li>
25 <li><a href="#"><img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAveS5waG90by5xcS5jb20vaW1nP3M9dWZGR29IZmFpJmFtcDtsPXkuanBn.jpg" alt="e-"/></a></li>
26 <li><a href="#"><img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAveS5waG90by5xcS5jb20vaW1nP3M9MUFxSjRyNWZzJmFtcDtsPXkuanBn.jpg" alt="e-"/></a></li>
27 </ul>
28 </body>
29 </html>
时间： 2024-07-31 14:52:40