css-過渡相關筆記
阿新 • • 發佈：2020-10-09
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .box1{ width: 800px; height: 800px; background-color: silver; overflow: hidden; } .box1 div{ width: 100px; height: 100px; margin-bottom: 100px; margin-left: 0; } .box2{ background-color: #bfa; /* transition: all 2s; */ /* 過渡: transition 可以指定一個屬性發生變化時候切換方式 可以建立一些非常好的效果，提升使用者體驗*/ /* transition-property 指定要過渡的屬性 多個屬性間用,隔開 如果所有屬性都要過渡，使用all 大部分屬性都支援過渡效果(只要是能計算的值都可以)注意:必須是一個有效數值向另一個有效數值過渡 */ /* transition-property: height,width; */ /* transition-property: all; */ /* transition-duration 指定過渡持續時間 時間單位: s和ms 1s = 1000ms*/ /* transition-duration: 100ms, 1s; */ /* transition-duration: 2s; */ /* transition-timing-function 過渡的時序函式 指定過渡的執行方式 可選值 -ease 預設值，慢速開始，先加速，再減速 -linear 勻速運動 -ease-in 加速運動 -ease-out 減速運動 -ease-in-out 先加速，後減速 -cubic-bezier()貝塞爾曲線來指定時序函式 steps() 分步執行過渡效果 -end 在時間結束執行過渡 -start 在時間開始時執行過渡 */ /* transition-timing-function: cubic-bezier(); */ /* transition-timing-function: steps(1,end); */ /* transition-delay 過渡效果的延遲 */ /* transition-delay: 2s; */ /* transition 可以同時設定相關的所有屬性，要求如果有延遲則兩個時間中第一個是持續時間，第二個是延遲 */ transition:margin-left 2s 1s; } .box3{ background-color: orange; transition-property: all; transition-duration: 2s; } .box1:hover div{ /* width: 200px; height: 200px; background-color: orange; */ margin-left: 700px; } </style> </head> <body> <div class="box1"> <div class="box2"></div> <div class="box3"></div> </div> </body> </html>