HTML5系列代码:为过渡属性指定不同的过渡时间

    技术2023-10-27  109

    transition-duration 属性规定完成过渡效果需要花费的时间(以秒或毫秒计)。 <!DOCTYPEHTML> <html> <head> <meta charset="utf-8"> <title>过渡效果</title> <style type="text/css"> div { margin:100px auto; width:200px; height:100px; background-color:#00F; /* 设置过渡属性 */ -webkit-transition-property:background-color,-webkit-transform; -moz-transition-property:background-color,-moz-transform; -o-transition-property:background-color,-o-transform; transition-property:background-color,transform; /* 设置过渡时间 */ -webkit-transition-duration:4s,1s; -moz-transition-duration:4s,1s; -o-transition-duration:4s,1s; transition-duration:4s,1s; } div:hover { background-color:#F90; /* 设置变形:旋转240deg */ -webkit-transform:rotate(240deg); -moz-transform:rotate(240deg); -o-transform:rotate(240deg); transform:rotate(240deg); } </style> </head> <body> <div></div> </body> </html>
    Processed: 0.010, SQL: 9