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

发布时间:2020-11-19 发布网站:脚本之家
前端之家收集整理的这篇文章主要介绍了transition实现的鼠标悬停淡入淡出的效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
 1 <!DOCTYPE html>
 2 <html 3     head 4         meta charset="utf-8" 5         title>transition实现的鼠标悬停淡入淡出的效果</ 6         style type="text/css" 7             div.wrap>div.box i{
 8                 width: 50px;
 9                 height10                 background #33311                 /* display: inline-block; */
12                 float left13                 margin 5px14                 cursor pointer15                 opacity 016                 transition opacity 2s17             }
18             .wrap19                 border 1px solid #ccc20                  overflow: hidden; 21 22             23             div.wrap>div.box i:hover24  125                 transition-duration 0s26             27         style28     29     body30         div class="wrap"31             ="box"32                 i></33                 34                 35                 36                 37                 38                 39                 40                 41                 42             div43         44     45 >

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

transition 代表 过度/opacity 代表 透明度/transform 代表 旋转/1S代表1秒时间/这段代码的意思是 该元素的透明和旋转如果发生变化时会有1秒的过度效果。也就是渐隐渐显,和旋转的动画。
transition主要包含四个属性值:执行变换的属性transition-property,变换延续的时间transition-duration,在延续的时间段内,变换的速率变化transition-timing-function,变换延迟时间transition-delay。

总结


以上是前端之家为你收集整理的transition实现的鼠标悬停淡入淡出的效果全部内容,希望文章能够帮你解决transition实现的鼠标悬停淡入淡出的效果所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。