在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的，有興趣的童鞋可以按照這個尺寸弄幾張圖片看一下效果。）