简单动画
（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>
效果如下：
