在css3出现之前手风琴的效果一般都是通过js或者jquery写，无论是哪种方法，都比较繁琐，css3的过渡:transition既简单又完美的实现了这一效果！ demo图:
关于css3transition这一属性的详解网上有很多，不了解的童鞋可以搜一下~这个效果是通过hover来改变图片在鼠标进入和进出时的显示范围，比较繁琐的一项工作是计算放大一张图片时其他图片平均占用显示区域的宽度和没有放大任何一张图片时（即初始状态）每个图片占用显示区域的宽度，为了突出立体效果，本例还设置了显示区域的阴影和每张图片的阴影，还有一个细节部分就是：css3未出现之前，我们设置
这个效果是相当麻烦的，现在呢，我们只需要一条命令就可以解决：background:rgba(0~255,0~255,0~255,0~1),这个a就是设置透明度用的，相当于opacity,rgb就是我们通常设置颜色用的。需要注意的地方大概就是这些，代码是超简单的，相信你看到会很兴奋！
View Code
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>css3 switchingImage</title> 6 <style> 7 *{margin:0;padding:0;border:0;} 8 ul,li{list-style-type:none;} 9 a{font-size:20px;color:#fff;font-weight:bold;line-height:50px;text-decoration:none;} 10 body{background:#319CC7;font-family: arial, verdana, tahoma;} 11 .out{width:760px;height:433px;margin:100px auto;overflow:hidden; 12 box-shadow:0 0 10px 1px rgba(0,0,0,0.25); 13 -o-box-shadow:0 0 10px 1px rgba(0,0,0,0.25); 14 -webkit-box-shadow:0 0 10px 1px rgba(0,0,0,0.25); 15 -moz-box-shadow:0 0 10px 1px rgba(0,0,0,0.25); 16 } 17 .in{width:2000px;} 18 .in li{position:relative;display:block;float:left;border:1px solid #BBBBBB;width:158px; 19 box-shadow:0 0 25px 10px rgba(0,0,0,0.25); 20 -o-box-shadow:0 0 25px 10px rgba(0,0,0,0.25); 21 -webkit-box-shadow:0 0 25px 10px rgba(0,0,0,0.25); 22 -moz-box-shadow:0 0 25px 10px rgba(0,0,0,0.25); 23 transition:all 0.5s; 24 -o-transition:all 0.5s; 25 -webkit-transition:all 0.5s; 26 -moz-transition:all 0.5s; 27 } 28 .in img{display:block;} 29 .attention{width:600px;height:50px;position:absolute;background:rgba(0,0,0,0.5);bottom:0;} 30 .attention a{display:block;cursor:pointer;} 31 ul:hover li{width:38px;} 32 ul li:hover{width:598px;} 33 .gray{position:absolute;z-index:-1;} 34 </style> 35 </head> 36 37 <body> 38 <div class='out'> 39 <ul class='in'> 40 <li> 41 <div class='attention'> 42 <a href='###' title='马尔代夫'>马尔代夫</a> 43 </div> 44 <img src="images/switch1.jpg"/> 45 </li> 46 <li> 47 <div class='attention'> 48 <a href='###' title='惠州建筑'>惠州建筑</a> 49 50 </div> 51 <img src="images/switch2.jpg"/> 52 </li> 53 <li> 54 <div class='attention'> 55 <a href='###' title='平寨水库'>平寨水库</a> 56 57 </div> 58 <img src="images/switch3.jpg"/> 59 </li> 60 <li> 61 <div class='attention'> 62 <a href='###' title='瑞士风光'>瑞士风光</a> 63 64 </div> 65 <img src="images/switch4.jpg"/> 66 </li> 67 <li> 68 <div class='attention'> 69 <a href='###' title='蓝色海洋'>蓝色海洋</a> 70 71 </div> 72 <img src="images/switch5.jpg"/> 73 </li> 74 </ul> 75 </div> 76 </body> 77 </html>
由于免费空间申请比较麻烦，所以暂时还木有申请到，没有办法上传demo，请见谅！（本例中用到的图片大小是宽600高433的，有兴趣的童鞋可以按照这个尺寸弄几张图片看一下效果。）