transition實現的鼠標懸停淡入淡出的效果

時間 2020-04-05

標籤 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。css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。