1.transition
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .box1{ 8 position: absolute; 9 width: 200px; 10 height: 200px; 11 /* background-color: rgba(200,180,170,.5); */ 12 background-color: #bfa; 13 14 /*opacity 用來設置元素的透明度 15 需要一個0-1之間的值 16 1 表示完全不透明 17 0 表示完全透明 18 19 rgba() 只是設置一個透明的樣式 20 */ 21 opacity: .5; 22 23 /* left: 0; */ 24 25 /* 26 過渡的設置方式 27 transition-property 表示對哪些屬性應用過渡 28 - 可以設置一個屬性 29 - 也可以設置多個屬性，多個屬性之間使用,隔開 30 - 也可以使用all，表示所有屬性 31 - 注意：所有的有具體數值的屬性都可以應用過渡效果 32 33 34 transition-duration 過渡的時間 35 - 時間單位 s（秒） ms（毫秒） 36 - 1s = 1000ms 37 */ 38 transition-property: all; 39 transition-duration: 1000ms; 40 } 41 42 /* 43 過渡指當一個元素的屬性發生變化，瀏覽器可以一點一點的將該值變化到目標值 44 過渡一般會用於一些交互效果，用來提升用戶體驗 45 */ 46 47 .box1:hover{ 48 width: 400px; 49 height: 400px; 50 left: 100px; 51 background-color: orange; 52 } 53 54 </style> 55 </head> 56 <body> 57 58 <div class="box1"> 59 Hello 60 61 <!-- <img src="../day07/img/an.jpg" alt=""> --> 62 </div> 63 64 </body> 65 </html>
2.transition
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 8 .outer{ 9 width: 1100px; 10 height: 500px; 11 border-right: 1px blue solid; 12 } 13 14 .box1{ 15 width: 100px; 16 height: 100px; 17 background-color: tomato; 18 19 /* transition-property: all; 20 transition-duration: 10s; */ 21 22 /* 23 transition-delay 過渡效果執行的延時 24 */ 25 /* transition-delay: 2s; */ 26 27 28 /* 29 transition-timing-function 用來指定過渡的時間函數 30 - 指定的就是過渡效果的運行方式 31 可選值： 32 ease 默認值，先加速 后減速 33 linear 勻速運動 34 ease-in 加速運動 35 ease-out 減速運動 36 ease-in-out 先加速，后減速 37 38 - 也可以通過貝塞爾曲線來自定義時間函數 39 cubic-bezier(p1, p2, p3, p4) 40 41 - steps()可以用來設置一個分步的過渡效果 42 steps(步數,end/start) 43 end 默認值，計時結束，才執行 44 start 計時剛開始就執行 45 46 https://cubic-bezier.com/ 生成貝塞爾曲線的網站 47 48 */ 49 /* transition-timing-function: cubic-bezier(.3,1.37,1,-0.71); */ 50 /* transition-timing-function: cubic-bezier(.03,-0.44,.93,-0.93); */ 51 /* transition-timing-function: steps(2,start); */ 52 53 54 /* transition 簡寫屬性，可以同時設置所有的過渡相關的樣式 55 簡寫屬性除了duration 和 delay兩個屬性外其他值沒有順序要求 56 */ 57 transition: steps(2) all 2s ; 58 59 60 } 61 62 .outer:hover .box1{ 63 margin-left: 1000px; 64 } 65 66 .box2{ 67 width: 100px; 68 height: 100px; 69 background-color: greenyellow; 70 margin-top: 100px; 71 72 transition-property: margin-left; 73 transition-duration: 2s; 74 } 75 76 .outer:hover .box2{ 77 margin-left: 1000px; 78 } 79 </style> 80 </head> 81 <body> 82 <div class="outer"> 83 <div class="box1"></div> 84 <!-- <div class="box2"></div> --> 85 86 </div> 87 88 </body> 89 </html>
3.animation
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>動畫</title> 6 <style> 7 .box1{ 8 height: 100px; 9 width: 100px; 10 position: absolute; 11 background-color: #bfa; 12 13 /* 將關鍵幀，應用到當前元素上 14 animation-name 表示當前要應用的動畫的名字 15 animation-duration 用來指定動畫執行的時間 16 animation-iteration-count 動畫執行的次數 17 可選值： 18 數值 19 infinite 無限執行 20 21 animation-delay 動畫開始執行的延時 22 animation-timing-function 指定動畫的時間函數 23 用法和transition是一致的 24 25 animation-play-state 動畫的運行狀態 26 可選值： 27 running 動畫運行 28 paused 動畫暫停 29 30 animation-direction 動畫執行的方向 31 可選值： 32 normal 默認值 動畫從 from 到 to 運行 33 reverse 動畫反向運行（從 to 到 from） 34 alternate 開始時從前向后走（from 到 to） 35 回來時會從后向前走（to 到 from） 36 alternate-reverse 開始時從后完全走（to 到 from） 37 回來時，從前往后走（from 到 to） 38 39 animation-fill-mode 動畫的填充方式 40 可選值： 41 none 默認值，動畫執行完畢后，元素會回到原來的位置 42 forwards 動畫執行完畢后，元素會停在結束位置 43 backwards 動畫執行延時時，元素會處在from的狀態 44 both 動畫執行延時時，元素會處在from的狀態 動畫執行完畢后，元素會停在結束位置 45 */ 46 /* animation-name: test; 47 animation-duration: 4s; 48 animation-delay: 2s; */ 49 50 /* animation-direction:alternate-reverse; */ 51 52 /* animation-fill-mode: both; */ 53 54 /* animation-timing-function: ease-in-out;*/ 55 56 /* animation-iteration-count: infinite; */ 57 58 59 /* 60 transition，只能用於設置一次性的過渡效果， 61 如果需要持續運行的動畫，必須要用到animation 62 63 要使用動畫，必須先設置關鍵幀 64 */ 65 66 67 /* 68 animation的簡寫屬性 69 可以通過它來設置所有的動畫相關的樣式 70 同樣只有 duration 和 delay 有順序要求 71 */ 72 animation: test 2s ease-in infinite both alternate; 73 74 75 } 76 77 .box2{ 78 height: 100px; 79 width: 100px; 80 top:200px; 81 position: absolute; 82 background-color: #bfa; 83 84 animation-name: test; 85 animation-duration: 4s; 86 animation-delay: 2s; 87 88 89 animation-fill-mode: none; 90 91 92 93 } 94 95 .box1:hover{ 96 animation-play-state: paused; 97 } 98 99 /* 創建一個關鍵幀 */ 100 @keyframes test{ 101 /* from指定動畫起始位置的樣式 */ 102 from{ 103 left: 0px; 104 background-color: tomato; 105 } 106 107 /* to指定動畫結束位置的樣式 */ 108 to{ 109 left: 800px; 110 background-color: yellow; 111 } 112 } 113 114 </style> 115 </head> 116 <body> 117 <div class="box1"></div> 118 119 120 <div class="box2"></div> 121 122 </body> 123 </html>