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="http://y.photo.qq.com/img?s=4BsfCJx6G&l=y.jpg" alt="e-"/></a></li> 23 <li><a href="#"><img src="http://y.photo.qq.com/img?s=MsUFaGd1k&l=y.jpg" alt="e-"/></a></li> 24 <li><a href="#"><img src="http://y.photo.qq.com/img?s=DvIQnaOOz&l=y.jpg" alt="e-"/></a></li> 25 <li><a href="#"><img src="http://y.photo.qq.com/img?s=ufFGoHfai&l=y.jpg" alt="e-"/></a></li> 26 <li><a href="#"><img src="http://y.photo.qq.com/img?s=1AqJ4r5fs&l=y.jpg" alt="e-"/></a></li> 27 </ul> 28 </body> 29 </html>
