html 简单动画效果,HTML-简单动画

简单动画

(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

效果如下：