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

html-css026

如何使用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}

}

可以x和y分开写动画,速度不一样,就形成曲率了

@keyframes anix {

0% {top: 0}

100% {top: 200px}

}

@keyframes aniy {

0% {left: 0}

100% {left: 100px}

}

css3中的动画有这个属性:animation-timing-function,他又几个不同的参数:

linear:动画从头到尾的速度是相同的。

ease:默认。动画以低速开始,然后加快,在结束前变慢。

ease-in:动画以低速开始。

ease-out:动画以低速结束。

ease-in-out:动画以低速开始和结束。

cubic-bezier(n,n,n,n):在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

你说的这个问题应该就是他的最后一个参数(cubic-bezier(n,n,n,n)---贝塞尔曲线),不过这个计算起来相对复杂很多。你可以参考一下http://blog.sina.com.cn/s/blog_68784e160101a7h5.html