:hover伪类选择器可以用于所有的选择器(只有在悬停时，执行选择器的属性)CSS3中新增过渡模块：transition property（属性）duration（过渡效果花费的时间）timing-function（过渡效果的时间曲线）delay（过渡效果何时开始）简写：transition：过渡属性 过渡时长 过渡速度 过渡延迟 （！！如果有多组属性要改变则直接用逗号隔开写几组即可）如果有的属性相同则例：all 5s表示都是5s完成三要素：必须属性发生变化 必须告诉系统哪个属性变化 必须告诉系统变化时长要实现多个属性变化效果，用逗号隔开在设计过渡效果时：1：不管过渡，先编写基本界面 2：修改我们需要修改的属性 3：给我们认为需要修改的属性元素添加过渡
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>过渡模块</title>
6 <style>
7 *{
8 padding: 0;
9 margin: 0;
10 }
11 div{
12 background-color: red;
13 width: 100px;
14 height: 50px;
15 /*告诉系统那个属性需要执行过渡效果*/
16 transition-property: width,background-color;
17 /*告诉系统过渡效果持续的时长*/
18 transition-duration: 3s,3s;
19 /*告诉系统延迟多少秒再发生变化*/
20 transition-delay: 1s,1s;
21 }
22 div:hover{
23 width: 300px;
24 background-color: #5bc0de;
25 }
26 ul{
27 list-style: none;
28 width: 500px;
29 height: 100px;
30 background-color: yellow;
31 }
32 li{
33 width: 50px;
34 height: 20px;
35 background-color: red;
36 transition-property: width,background-color;
37 transition-duration: 3s,3s;
38 }
39 ul:hover li{
40 width: 500px;
41 background-color: #5bc0de;
42 }
43 .box1{
44 transition-timing-function: ease;
45 }
46 .box2{
47 transition-timing-function: ease-in;
48 }
49 .box3{
50 transition-timing-function: ease-out;
51 }
52 .box4{
53 transition-timing-function: ease-in-out;
54 }
55 .box5{
56 transition-timing-function: linear;
57 }
58
59
60 </style>
61 </head>
62 <body>
63
64 <div></div>
65 <br>
66 <ul>
67 <li class="box1">box1</li>
68 <li class="box2">box2</li>
69 <li class="box3">box3</li>
70 <li class="box4">box4</li>
71 <li class="box5">box5</li>
72 </ul>
73 </body>
74 </html>
原文地址：https://www.cnblogs.com/myErebos/p/8586402.html
时间： 2024-08-01 05:30:10