码迷,mamicode.com
首页 > Web开发 > 详细

纯css手风琴效果

时间:2014-08-27 12:38:37      阅读:287      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   ar   div   html   log   

 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>
  • bubuko.com,布布扣
  • bubuko.com,布布扣
  • bubuko.com,布布扣
  • bubuko.com,布布扣
  • bubuko.com,布布扣

纯css手风琴效果

标签:style   blog   http   color   io   ar   div   html   log   

原文地址:http://www.cnblogs.com/y327595826/p/3939032.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!