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 代表 过度/opacity 代表 透明度/transform 代表 旋转/1S代表1秒时间/这段代码的意思是 该元素的透明和旋转如果发生变化时会有1秒的过度效果。也就是渐隐渐显,和旋转的动画。
transition主要包含四个属性值:执行变换的属性transition-property,变换延续的时间transition-duration,在延续的时间段内,变换的速率变化transition-timing-function,变换延迟时间transition-delay。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。