css实现椭圆轨迹旋转

html-css039

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

做斜线运动

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

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

@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)