css3用transtion属性实现动画效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #jrtj{ width: 200px; height: 150px; background: dodgerblue; /*transition过渡的意思 3s 3秒的意思*/ /*transition: width 3s;*/ /*0.2s是延时0.2秒才开始动的意思 linear是匀速(相同速度开始至结)*/ /*transition:width 3s 0.2s linear;*/ /*ease-in 开始的时候慢，之后快*/ /*transition:width 3s 0.2s ease-in;*/ /*all比较费资源点*/ /*transition:width all 3s 0.2s ease-in;*/ /*指定要监控的属性 property属性的意思*/ transition-property: width; /*指定运动时间 duration持续的时间的意思*/ transition-duration: 2s; /*指定延迟时间 delay延迟的意思*/ transition-delay:0.5s; /*运动曲线 timing 定时的意思 function功 能，作用 */ transition-timing-function: ease-in; } #jrtj:hover{ width: 900px; } </style> </head> <body> <div id="jrtj"> </div> </body> </html> 代码效果点上面的运行代码
原文链接：https://www.qiquanji.com/post/7499.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知