css实现椭圆轨迹旋转

html-css029

css实现椭圆轨迹旋转,第1张

做斜线运动

设置Y轴延时为动画时长的一半, 运动轨迹变成菱形

为了看起来有立体感添加scale属性,scale动画应该是X轴和Y轴的时间总和

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

@keyframes anix {

0% {top: 0}

100% {top: 200px}

}

@keyframes aniy {

0% {left: 0}

100% {left: 100px}

}