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

html-css027

怎么完全用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。由于时间仓促我没有具体实验过，而且表达可能不太清楚，请原谅。

给这个元素添加样式

｛

border-top-left-radius: 数值px

border-top-right-radius:数值px

｝

或者直接用背景图片

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

@keyframes anix {

0% {top: 0}

100% {top: 200px}

}

@keyframes aniy {

0% {left: 0}

100% {left: 100px}

}