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
时间： 2024-08-08 12:12:03