CSS學習筆記-05 過渡模塊的基本用法
阿新 • • 發佈：2018-06-16
pan hover 如果 add mpat 時長 idt .com IT
話說 1對情侶兩情相悅，你情我願。時機成熟，夜深人靜。、。咳 ，如果就這麽直奔主題，是不是有點猴急，所以，還是要來點前戲@。 鐺 鐺， 這個時候 過渡模塊出現了。
劃重點：
上代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 50px; background-color: red; /* 告訴瀏覽器哪個屬性需要執行過渡效果 */ transition-property: width background-color; /* 過渡效果持續的時長 */ transition-duration: 5s,5s; } /* hover 這個偽類選擇器出了可以用在a 標簽上，還可以用在其他任何標簽上 */ div:hover{ width: 500px; background-color: blue; } /* 過渡三要素 1. 必須要有屬性變化。 2. 必須告訴系統哪個屬性需要執行過渡效果。 3. 必須告訴系統過渡效果持續時長。 註意點： 當多個屬性需要同時執行過渡效果時，用逗號隔開即可。 transition-property: width background-color; transition-duration: 5s,5s;*/ </style> </head> <body> <div></div> </body> </html>
CSS學習筆記-05 過渡模塊的基本用法