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

怎么完全用css3使一個的元素做流暢的弧線運動

CSS3

慕斯王 2019-05-17 16:34:19

查看完整描述

3 回答

慕的地8271018

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

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>

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

反對回復(fù) 2019-05-17

MMMHUHU

TA貢獻(xiàn)1834條經(jīng)驗獲得超8個贊

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

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

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

4.svg-抱歉這個我還沒研究。

推薦方式：
canvas，步驟：

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