本文介绍了如何利用JavaScript和CSS实现元素的曲线运动。JavaScript实现中，通过数学函数如sin(x)来控制元素的left和top值，同时绘制运动轨迹。CSS实现则依赖于animation和cubic-bezier函数，创建自定义的速度曲线来控制元素的XY运动轨迹。文中给出了详细的代码示例和效果说明。
纯js实现原理：
通过函数表达式来完成对应的移动，函数表达式能够得到曲线图都能完成。
比如 y=sin(x)就是典型的曲线函数。
转换关系y：函数Y轴对应的就是我们的top Y==top
转换关系x：函数X轴对应的就是我们的left X==left
示例：(由于是js，顺带画了运动轨迹)
js元素弧线运动.box{
width: 1000px;
height: 500px;
background-color:#369;
position:relative;
}
.box>span{
display: block;
width: 10px;
height: 10px;
background-color:#963;
position:absolute;
top:230px
}
.box>.zz{
width: 3px;
height: 3px;
background-color:red;
position:absolute;
}
(function(){
var boxDom = document.querySelector('.box');
var spanDom = document.querySelector('.box>span');
setInterval(function(){//定时器
v
最低0.47元/天 解锁文章
1157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
