html/css椭圆运动

叨逼逼

我在设计个人简历主界面的时候，想将背景做成行星绕着恒星转的画面。这就需要css中的animation来实现椭圆运动。

开始造作

让我们看一下菜鸟教程css文档中有关animation的介绍。

菜鸟教程animation介绍

animation-timing-function可以设置速度曲线，即是可以通过该属性修改物体的运动速度和加速度。这正是我们需要的。

让我们思考一下，将椭圆的短轴无限缩小，椭圆的长轴无限扩大。则该椭圆将变得十分扁平，物体绕该椭圆运动就像绕一条直线做往返运动。如gif图所示。

所以我设置如下的css样式。

#test{
width: 200px;
height: 200px;
background-color: rebeccapurple;
animation: actionX 2s linear 0s infinite alternate,
actionY 2s linear 0s infinite alternate;
position: absolute;
}
@keyframes actionX{
0%{
left: 0px;
}