CSS3——过渡模块——手风琴案例
2021-04-01 07:25
标签：doctype font 鼠标 oat 宽度 over hidden hover 案例 鼠标悬浮时效果图： CSS3——过渡模块——手风琴案例 标签：doctype font 鼠标 oat 宽度 over hidden hover 案例 原文地址：https://www.cnblogs.com/2020-2-12/p/12576400.html 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>