叨逼逼
我在设计个人简历主界面的时候,想将背景做成行星绕着恒星转的画面。这就需要css中的animation来实现椭圆运动。
开始造作
让我们看一下菜鸟教程css文档中有关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;
}