簡單動畫 （1）簡單動畫通常稱之為“過渡transition” Transition-property：需要過渡的屬性，但是並非所有的屬性都支持過渡。 Transition-duration：過渡的時間； 簡寫：transition：all 時間； （2）漸變時間函數 Transition-timi ...
簡單動畫
（1）簡單動畫通常稱之為“過渡transition”
Transition-property：需要過渡的屬性，但是並非所有的屬性都支持過渡。
Transition-duration：過渡的時間；
簡寫：transition：all 時間；
（2）漸變時間函數
Transition-timing-function——CSS屬性以何種速度進行漸變
貝塞爾曲線的預設值：
ease：漸快，勻速，減慢（cubic-bezier(0.25,0.1,0.25,1)）
ease-in：漸快，勻速（cubic-bezier(0.42,0,1,1)）
ease-out：勻速，減慢（cubic-bezier(0,0,0.58,1)）
ease-in-out：和ease類似，相比ease的加速度大（幅度大）（cubic-bezier(0.42,0,0.58,1)）
linear：全程勻速（cubic-bezier(0,0,1,1)）
以下代碼所示，第一部分展示的是一個，當滑鼠移動到圖片上時，顯示另一張（底下）的圖片；
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>動畫和變形練習</title> 9 </head> 10 <style> 11 /* 第一個部分，設置當滑鼠滑動到圖片上時，顯示底下的圖片 */ 12 13 .box { 14 width: 300px; 15 height: 300px; 16 position: relative; 17 } 18 19 .box img { 20 width: 300px; 21 height: 300px; 22 position: absolute; 23 left: 0; 24 top: 0; 25 } 26 27 .show1 { 28 transition: all 3s; 29 } 30 31 .show1:hover { 32 opacity: 0; 33 } 34 <body> 35 <div class="box"> 36 <img src="img/2010011712541728.jpg" alt=""> 37 <img src="img/2010011712541759.jpg" alt="" class="show1"> 38 </div> 39 </body> 40 41 </html>
效果如下：
以下代碼展示的是利用簡單動畫製作出輪播圖的效果，當滑鼠移動到圖片上時，後面的圖片推動前面的圖片，從而達到輪播的效果；
<!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>動畫和變形練習</title> </head> <style> /* 第二個部分 */ .content { width: 500px; height: 300px; overflow: hidden; } .imgs img { width: 500px; height: 300px; } .imgs { width: 1100px; height: 300px; transition: all 3s; display: flex; justify-content: flex-start; } .imgs:hover { margin-left: -500px; } </style> <body> <!-- 第二部分 --> <div class="content"> <div class="imgs"> <img src="img/2010011712541728.jpg" alt=""> <img src="img/2010011712541759.jpg" alt="" class="show"> </div> </div> <hr> </body> </html>
效果如下：
以下代碼展示的是當滑鼠移動到圖片上時，四周都散髮陰影效果；
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>動畫和變形練習</title> 9 </head> 10 <style> 11 12 /* 第三個部分 */ 13 14 .box3 { 15 width: 300px; 16 height: 300px; 17 transition: all 3s; 18 position: relative; 19 } 20 21 .box3 img { 22 width: 300px; 23 height: 300px; 24 position: absolute; 25 left: 0; 26 top: 0; 27 } 28 29 .box3:hover { 30 box-shadow: 0 0 4px 15px rgba(233, 22, 233, 0.5) 31 } 32 </style> 33 34 <body> 35 36 <!-- 第三部分 --> 37 <div class="box3"> 38 <img src="img/2010011712541728.jpg" alt="" class="show3"> 39 <img src="img/2010011712541759.jpg" alt=""> 40 </div> 41 </body> 42 43 </html>
效果如下：
