猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

怎么完全用css3使一个的元素做流畅的弧线运动

怎么完全用css3使一个的元素做流畅的弧线运动


噜噜哒
浏览 581回答 3
3回答

九州编程

12345678910111213141516171819202122232425262728293031323334353637383940414243<!DOCTYPE&nbsp;html><html&nbsp;lang="en"><head>&nbsp;&nbsp;&nbsp;&nbsp;<meta&nbsp;charset="UTF-8">&nbsp;&nbsp;&nbsp;&nbsp;<title>Document</title>&nbsp;&nbsp;&nbsp;&nbsp;<style>&nbsp;&nbsp;&nbsp;&nbsp;.test{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;50px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;200px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;50px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;50px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius:&nbsp;50%;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;red;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation:&nbsp;move&nbsp;2s&nbsp;linear;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-animation:&nbsp;move&nbsp;2s&nbsp;linear;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-ms-animation:&nbsp;move&nbsp;2s&nbsp;linear;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-o-animation:&nbsp;move&nbsp;2s&nbsp;linear;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;animation:&nbsp;move&nbsp;2s&nbsp;linear;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;@keyframes&nbsp;move{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0%{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left&nbsp;:&nbsp;50px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;200px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;50%{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;150px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;100px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100%{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;250px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;200px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;</style></head><body>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="test"></div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</body></html>简单做了一个，反弹有些生硬。你可以自己调一调参数。修改的更符合力学原理。&nbsp;
0

慕桂英3389331

在html5+css3中做到动态效果有4种方式：1.transition(过渡)-通过属性值的变化来平滑过渡产生动画；2.animate(动画)-这是css3中的自带的动画，可以动过各种变形（比如形变、缩放、位移），这里的位移其实就可以实现弧线运动，但是这儿需要的代码会非常多，个人是不建议用这个方法的。3.canvas（画布）-可以想象着拿着一支笔在画笔上画东西，映射到电脑上，就是在每个坐标上面画东西。4.svg-抱歉 这个我还没研究。推荐方式：canvas，步骤：1.要达到弧线运动，那么就必须知道弧线的公式2.通过setinterval来设置每一帧的坐标，比如：(function({y=公式与x的联系} ,30)//这儿的30，代表30毫秒为一帧。补充：如果要有个重复动作，那么久必须设置一个临界值，然后点返回原点重复动作；&nbsp;
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

CSS3