怎么完全用css3使一个的元素做流畅的弧线运动
3 回答
繁星淼淼
TA贡献1775条经验 获得超11个赞
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> <html lang="en"> <head> <meta charset="UTF-8"> <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>
<div class="test"></div>
</body> </html> |
简单做了一个，反弹有些生硬。你可以自己调一调参数。修改的更符合力学原理。
千巷猫影
TA贡献1829条经验 获得超7个赞
在html5+css3中做到动态效果有4种方式：
1.transition(过渡)-通过属性值的变化来平滑过渡产生动画；
2.animate(动画)-这是css3中的自带的动画，可以动过各种变形（比如形变、缩放、位移），这里的位移其实就可以实现弧线运动，但是这儿需要的代码会非常多，个人是不建议用这个方法的。
3.canvas（画布）-可以想象着拿着一支笔在画笔上画东西，映射到电脑上，就是在每个坐标上面画东西。
4.svg-抱歉 这个我还没研究。
推荐方式：
canvas，步骤：
1.要达到弧线运动，那么就必须知道弧线的公式
2.通过setinterval来设置每一帧的坐标，比如：
(function({
y=公式与x的联系
} ,30)//这儿的30，代表30毫秒为一帧。
补充：如果要有个重复动作，那么久必须设置一个临界值，然后点返回原点重复动作；
- 3 回答
- 0 关注
- 390 浏览
添加回答
举报
0/150
提交
取消