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>
