简单动画
(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
2
3
4
5
6
7
8
动画和变形练习9
10
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
35
36
37
38
39
40
41
效果如下:
以下代码展示的是利用简单动画制作出轮播图的效果,当鼠标移动到图片上时,后面的图片推动前面的图片,从而达到轮播的效果;
动画和变形练习/* 第二个部分 */
.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;
}
效果如下:
以下代码展示的是当鼠标移动到图片上时,四周都散发阴影效果;
1
2
3
4
5
6
7
8
动画和变形练习9
10
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
33
34
35
36
37
38
39
40
41
42
43
效果如下: