首頁猿問怎么完全用css3使一個(gè)的元素做流...

怎么完全用css3使一個(gè)的元素做流暢的弧線運(yùn)動(dòng)

CSS3

慕容3067478 2019-03-19 13:12:32

查看完整描述

3 回答

鳳凰求蠱

TA貢獻(xiàn)1825條經(jīng)驗(yàn) 獲得超4個(gè)贊

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.test{

position: absolute;

left: 50px;

top: 200px;

width: 50px;

height: 50px;

border-radius: 50%;

background: red;

-webkit-animation: move 2s linear;

-moz-animation: move 2s linear;

-ms-animation: move 2s linear;

-o-animation: move 2s linear;

animation: move 2s linear;

}

@keyframes move{

0%{

left : 50px;

top: 200px;

}

50%{

left: 150px;

top: 100px;

}

100%{

left: 250px;

top: 200px;

}

</style>

</head>

<body>

</body>

</html>

簡單做了一個(gè)，反彈有些生硬。你可以自己調(diào)一調(diào)參數(shù)。修改的更符合力學(xué)原理。

反對(duì) 回復(fù) 2019-03-27

慕容708150

TA貢獻(xiàn)1831條經(jīng)驗(yàn) 獲得超4個(gè)贊

在html5+css3中做到動(dòng)態(tài)效果有4種方式：
1.transition(過渡)-通過屬性值的變化來平滑過渡產(chǎn)生動(dòng)畫；

2.animate(動(dòng)畫)-這是css3中的自帶的動(dòng)畫，可以動(dòng)過各種變形（比如形變、縮放、位移），這里的位移其實(shí)就可以實(shí)現(xiàn)弧線運(yùn)動(dòng)，但是這兒需要的代碼會(huì)非常多，個(gè)人是不建議用這個(gè)方法的。

3.canvas（畫布）-可以想象著拿著一支筆在畫筆上畫東西，映射到電腦上，就是在每個(gè)坐標(biāo)上面畫東西。

4.svg-抱歉這個(gè)我還沒研究。

推薦方式：
canvas，步驟：

1.要達(dá)到弧線運(yùn)動(dòng)，那么就必須知道弧線的公式
2.通過setinterval來設(shè)置每一幀的坐標(biāo)，比如：
(function({
y=公式與x的聯(lián)系
} ,30)//這兒的30，代表30毫秒為一幀。
補(bǔ)充：如果要有個(gè)重復(fù)動(dòng)作，那么久必須設(shè)置一個(gè)臨界值，然后點(diǎn)返回原點(diǎn)重復(fù)動(dòng)作；