如何使用css3让一个元素做正弦曲线运动

html-css015

如何使用css3让一个元素做正弦曲线运动,第1张

css3不能完全按照正弦曲线来做运动的轨迹，但可以模拟，比如曲线上的几个点是(0,0),(1,1),(2,0),(3,1),(4,0),(5,1),动画逻辑如下：

@keyframes myanimate

{

0% {left: 0top: 0}

20% {left: 1top: 1}

40% {left: 2top: 0}

60% {left: 3top: 1}

80% {left: 4top: 0}

100% {left: 5top: 1}

}

可以做一个animation，举一个例子，让一个元素在某一个范围之内，左距离和上距离同时改变。但是，弧线要让两个距离改变速度变化不一致，所以最好一个元素改变上方距离（可以是top也可是margin-top），里面嵌入一个元素改变左边距离。例如，假如你要让横轴均匀变化，纵轴不均匀变化，轨迹为⌒形，可以左变化为{from{margin-left:0px}to{margin-left:200px}}，运动方式设为linear，然后上下变化可以{from{margin-top:100px}50%{margin-top:0px}to{margin-top:100px}}，运动方式设为ease-in-out。由于时间仓促我没有具体实验过，而且表达可能不太清楚，请原谅。