1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width: 200px; 9 height: 200px; 10 background-color: red; 11 position: absolute; 12 left: 50px; 13 top: 50px; 14 /*过渡：过渡有延迟，有值的变化才能有过渡*/ 15 /* 16 transition-property: 需要添加过渡效果的样式属性名称; --必需 17 transition-duration: 过渡效果完成所需要的时长，以s为单位; -- 必需 18 transition-delay: 延迟多少s后开始过渡 ; -- 0 19 transition-timing-function: 过渡效果的时间函数--速度曲线; --ease-in-out 20 21 */ 22 /*transition-property: left; 23 transition-duration: 1s; 24 transition-delay: 1s; 25 transition-timing-function: linear;*/ 26 27 /*transition-property: left,background-color;*/ 28 /*transition-duration: 1s,10s;*/ 29 30 /*简写方式*/ 31 /*transition: property duration delay timing-function;*/ 32 /*transition: left 1s 1s linear , background-color 1s;*/ 33 34 35 /*all 对所有属性都会运用过渡效果 36 1.遍历当前元素的所有可能的样式属性 37 2.降低效率 38 */ 39 transition: all 1s 1s linear; 40 } 41 div:active{ 42 left: 500px; 43 width: 400px; 44 background-color: #ceffbb; 45 } 46 </style> 47 </head> 48 <body> 49 <div></div> 50 </body> 51 </html>
