HTML5系列代码:过渡效果

    技术2023-10-21  105

    transition 属性是一个简写属性,用于设置四个过渡属性:transition-propertytransition-durationtransition-timing-functiontransition-delay注释:请始终设置 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:all 1000ms linear 500ms; /* 兼容webkit内核 */ -moz-transition:all 1000ms linear 500ms; /* 兼容gecko内核 */ -o-transition:all 1000ms linear 500ms; /* 兼容presto内核 */ transition:all 1000ms linear 500ms; /* 标准写法 */ } 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.012, SQL: 9