transition实现的鼠标悬停淡入淡出的效果

 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。

你可能感兴趣的:(transition实现的鼠标悬停淡入淡出的效果)