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

html-css06

怎么完全用CSS3使一个的元素做流畅的弧线运动?,第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。由于时间仓促我没有具体实验过,而且表达可能不太清楚,请原谅。

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}

}

@keyframes drop

0%

transform: translate(0,0) rotate3d(0,1,0,0deg)

33%

transform: translate(-20px,245px) rotate3d(0,1,0,-60deg)

66%

transform: translate(20px,490px) rotate3d(0,1,0,60deg)

100%

transform: translate(0,736px) rotate3d(0,1,0,0deg)

@keyframes drop2

0%

transform: translate(0,0) rotate3d(1,0,0,0deg)

33%

transform: translate(20px,245px) rotate3d(1,0,0,60deg)

66%

transform: translate(-20px,490px) rotate3d(1,0,0,-60deg)

100%

transform: translate(0,736px) rotate3d(1,0,0,0deg)