CSS3——过渡模块——手风琴案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS3过渡模块-手风琴效果</title>
 6     <style>
 7         *{margin: 0;padding: 0;}
 8         ul{
 9             width: 960px;
10             height: 300px;
11             border: 1px solid red;
12             margin: auto;
13             list-style: none;
14             overflow: hidden;
15         }
16         ul li{
17             width: 160px;
18             float: left;
19             transition: width 1s; 
20         }
　　　　　　
　　　　　　　鼠标悬浮ul时，设置所有li宽度变小
21         ul:hover li{  
22             width: 100px;
23         }

　　　　　　　
24         ul li:hover{鼠标悬浮当前li时，宽度变宽
25             width: 460px;
26         }
27     </style>
28 </head>
29 <body>
30 <ul>
31     <li><img src="video/images/ad1.jpg" alt=""></li>
32     <li><img src="video/images/ad2.jpg" alt=""></li>
33     <li><img src="video/images/ad3.jpg" alt=""></li>
34     <li><img src="video/images/ad4.jpg" alt=""></li>
35     <li><img src="video/images/ad5.jpg" alt=""></li>
36     <li><img src="video/images/ad6.jpg" alt=""></li>
37 </ul>
38 </body>
39 </html>
鼠标悬浮时效果图：
原文地址：https://www.cnblogs.com/2020-2-12/p/12576400.html