transition实现的鼠标悬停淡入淡出的效果
Posted dhnblog
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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实现的鼠标悬停淡入淡出的效果的主要内容，如果未能解决你的问题，请参考以下文章