HTML5系列代码:延迟的过渡效果

    技术2023-10-18  103

    transition-property 属性规定应用过渡效果的 CSS 属性的名称。(当指定的 CSS 属性改变时,过渡效果将开始)。提示:过渡效果通常在用户将鼠标指针浮动到元素上时发生。注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。 <!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:all; -moz-transition-property:all; -o-transition-property:all; transition-property:all; /* 设置过渡时间 */ -webkit-transition-duration:1000ms; -moz-transition-duration:1000ms; -o-transition-duration:1000ms; transition-duration:1000ms; /* 设置延迟时间 */ -webkit-transition-delay:-300ms; -moz-transition-delay:-300ms; -o-transition-delay:-300ms; transition-delay:-300ms; } 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