transition实现的鼠标悬停淡入淡出的效果
程序员文章站
2022-07-03 13:10:12
transition 代表 过度/opacity 代表 透明度/transform 代表 旋转/1S代表1秒时间/这段代码的意思是 该元素的透明和旋转如果发生变化时会有1秒的过度效果。也就是渐隐渐显，和旋转的动画。transition主要包含四个属性值：执行变换的属性transition-prop... ......
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>transition实现的鼠标悬停淡入淡出的效果</title>
6 <style type="text/css">
7 div.wrap>div.box i{
8 width: 50px;
9 height: 50px;
10 background: #333;
11 /* display: inline-block; */
12 float: left;
13 margin: 5px;
14 cursor: pointer;
15 opacity: 0;
16 transition: opacity 2s;
17 }
18 .wrap{
19 border: 1px solid #ccc;
20 /* overflow: hidden; */
21 float: left;
22 }
23 div.wrap>div.box i:hover{
24 opacity: 1;
25 transition-duration: 0s;
26 }
27 </style>
28 </head>
29 <body>
30 <div class="wrap">
31 <div class="box">
32 <i></i>
33 <i></i>
34 <i></i>
35 <i></i>
36 <i></i>
37 <i></i>
38 <i></i>
39 <i></i>
40 <i></i>
41 <i></i>
42 </div>
43 </div>
44 </body>
45 </html>
transition 代表 过度/opacity 代表 透明度/transform 代表 旋转/1s代表1秒时间/这段代码的意思是 该元素的透明和旋转如果发生变化时会有1秒的过度效果。也就是渐隐渐显，和旋转的动画。
transition主要包含四个属性值：执行变换的属性transition-property，变换延续的时间transition-duration，在延续的时间段内，变换的速率变化transition-timing-function，变换延迟时间transition-delay。
上一篇： MIX如何裁剪照片?MIX裁剪照片的方法