您现在的位置:爱折腾>> web>>正文内容

纯CSS3手风琴效果

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title>squeezebox</title> 
  6.     <style> 
  7.         *{  
  8.             padding:0;  
  9.             margin:0;  
  10.         }  
  11.         body{  
  12.             padding:100px;  
  13.         }  
  14.         li{  
  15.             list-style-type:none;  
  16.         }  
  17.         ul{  
  18.             width:600px;  
  19.             height:250px;  
  20.             overflow:hidden;  
  21.         }  
  22.         li{  
  23.             float:left;  
  24.             width:120px;  
  25.             -webkit-transition: width 0.5s ease-out;  
  26.             -moz-transition: width 0.5s ease-out;  
  27.             -ms-transition: width 0.5s ease-out;  
  28.             -o-transition: width 0.5s ease-out;  
  29.             transition: width 0.5s ease-out;  
  30.         }  
  31.         li:hover{  
  32.             width:400px;  
  33.         }  
  34.         ul:hover li:not(:hover){  
  35.             width:50px;  
  36.         }  
  37.     </style> 
  38. </head> 
  39. <body> 
  40. <ul> 
  41.     <li><a href="#"><img src="http://nec.netease.com/img/m/1.jpg" alt=""/></a></li> 
  42.     <li><a href="#"><img src="http://nec.netease.com/img/m/2.jpg" alt=""/></a></li> 
  43.     <li><a href="#"><img src="http://nec.netease.com/img/m/3.jpg" alt=""/></a></li> 
  44.     <li><a href="#"><img src="http://nec.netease.com/img/m/4.jpg" alt=""/></a></li> 
  45.     <li><a href="#"><img src="http://nec.netease.com/img/m/5.jpg" alt=""/></a></li> 
  46. </ul> 
  47. </body> 
  48. </html> 

相关文章