css3实现椭圆轨迹旋转

Posted 2022-09-17 ---godzilla---

css3实现椭圆轨迹旋转

实现效果

X轴Y轴在一个矩形内移动

做斜线运动

 

 1 .ball 
 2     position: absolute;
 3     animation: 
 4       animX 2s linear  infinite alternate,
 5       animY 2s linear  infinite alternate
 6   
 7 @keyframes animX
 8       0% left: 0px;
 9     100% left: 500px;
10 
11 @keyframes animY
12       0% top: 0px;
13     100% top: 300px;
14 

 

设置动画延时

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

1  .ball 
2     animation: 
3       animX 2s linear 0s infinite alternate,
4       animY 2s linear -1s infinite alternate
5   

设置三次贝塞尔曲线

1  .ball 
2     animation: 
3       animX 2s  cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate,
4       animY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate
5   

缩小放大

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

 1  .ball1 
 2     animation: 
 3       animX 2s  cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate,
 4       animY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
 5       scale 4s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
 6   
 7  @keyframes scale 
 8  
 9     0% 
10       transform: scale(0.7)
11     
12     50% 
13       transform: scale(1)
14     
15     100% 
16       transform: scale(0.7)
17    
18