matlab红点沿着正弦曲线运动,如何使用css3让一个元素做正弦曲线运动？

天涯尽头无女友

纯CSS3我知道的方法里面搞不出来因为CSS3动画中没有对路径的操作，或者说不好搞除非你把每一帧的变化都写上。如果会AE可以考虑先用AE制作动画，然后使用Lottie导出web可用的json文件，这样可以做出很复杂的动画。不过这个方法我还没用过可以去看Lottie的官方文档用Canvas实现下面说一个使用Canvas制作的方法，如果要用操作DOM来实现动画，原理是一样的只不过把绘制那一块改为设置元素的定位。先看一下Demo定义小球类//创建一个小球的构造函数functionO(){}//给构造函数添加继承属性O.prototype={init:function(){//X轴(正弦运动中心线的位置)this.h=canvas.height/2;//在X轴所处的位置this.x=0;//在Y轴所处的位置this.y=this.h;//小球半径this.r=20;//小球运动的速度this.v=10;//小球颜色this.color="rgb(255,68,68)";},draw:function(){//绘制小球ctx.beginPath();ctx.arc(this.x,this.y,this.r,0,Math.PI*2);ctx.fillStyle=this.color;ctx.fill();this.updata();},//更新小球位置updata:function(){//如果横向超出Canvas宽度就回到起点if(this.x>canvas.width){this.x=0;}//横轴移动this.x+=this.v;//计算在纵轴的位置,中心位置加上偏移//计算弧度,因为Math.sin()的参数是弧度,将整个宽度看为一个周期,X处所占的弧度就为,起点到X距离与宽度之比乘以2πletradian=this.x/canvas.width*Math.PI*2;//计算偏移高度,因为Math.sin()返回值是-1~1的数字,所以要将这个值转化为真正移动的高度,就是容器的一班高度减去球直径letheight=(canvas.height-this.r*2)/2this.y=this.h+Math.sin(radian)*height;}}绘制小球//创建小球并初始化varo=newO();o.init();//开始动画functionanimation(){//刷新Canvasctx.fillStyle="rgba(255,255,255)";ctx.fillRect(0,0,1000,500);//绘制小球o.draw();//调用下一帧aimnid=requestAnimationFrame(animation);}注释里面都已经写的很清楚了，我就不解释了，完整代码在这里查看完整代码如果对你有帮助请给一个Star～哦