css 围绕椭圆轨迹旋转

最新推荐文章于 2024-04-11 15:23:16 发布

L.@

最新推荐文章于 2024-04-11 15:23:16 发布

阅读量3.5k

点赞数 4

文章标签： css

本文链接：https://blog.csdn.net/weixin_43962877/article/details/102783469

版权

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
      }

      .loop-run {
        width: 600px;
        height: 300px;
        background: #005E82;
        position: relative;
        border-radius: 50%;
      }

      .circle {
        width: 30px;
        height: 30px;
        background: #F0506E;
        border-radius: 50%;
        position: absolute;
      }


      .circle1 {
        animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate,
          animY 6s cubic-bezier(0.36, 0, 0.64, 1)  0s infinite alternate;
          scale 12s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
      }

      .circle2 {
        animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -5.4s infinite alternate,
          animY 6s cubic-bezier(0.36, 0, 0.64, 1) -2.4s infinite alternate;
          scale 12s cubic-bezier(0.36, 0, 0.64, 1) -2.4s infinite alternate;
      }

      .circle3 {
        animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -7.8s infinite alternate,
          animY 6s cubic-bezier(0.36, 0, 0.64, 1) -4.8s infinite alternate;
          scale 12s cubic-bezier(0.36, 0, 0.64, 1) -4.8s infinite alternate;
      }

      .circle4 {
        animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -10.2s infinite alternate,
          animY 6s cubic-bezier(0.36, 0, 0.64, 1) -7.2s infinite alternate;
           scale 12s cubic-bezier(0.36, 0, 0.64, 1) -7.2s infinite alternate;
      }

      .circle5 {
        animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -12.6s infinite alternate,
          animY 6s cubic-bezier(0.36, 0, 0.64, 1) -9.6s infinite alternate;
           scale 12s cubic-bezier(0.36, 0, 0.64, 1) -9.6s infinite alternate;
      }

      @keyframes animX {
        0% {
          left: -4%;
        }

        100% {
          left: 96%;
        }
      }

      @keyframes animY {
        0% {
          top: -4%;
        }

        100% {
          top: 96%;
        }
      }
     keyframes scale {
     
       0% {
         transform: scale(0.5);
         opacity: 0.5;
       }
     
       50% {
         transform: scale(1);
         opacity: 1;
       }
     
       100% {
         transform: scale(0.5);
         opacity: 0.5;
       }
     }
    </style>
  </head>
  <body>
    <div class="loop-run">
      <div class="circle circle1"></div>
      <div class="circle circle2"></div>
      <div class="circle circle3"></div>
      <div class="circle circle4"></div>
      <div class="circle circle5"></div>
    </div>
  </body>
</html>

设置动画延迟(设置三次贝塞尔曲线)
设置x轴延迟为动画时长的一半,放大缩小，scale动画应该是X轴和Y轴的时间总和,，scale动画延迟等于x轴的动画延时

.circle1 {
        animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate,
          animY 6s cubic-bezier(0.36, 0, 0.64, 1)  0s infinite alternate;
          scale 12s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
      }

例子椭圆上有5个圆在运动，x轴和y轴的动画延时设置

 .circle1 {
        animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate,
          animY 6s cubic-bezier(0.36, 0, 0.64, 1)  0s infinite alternate;
          scale 12s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
      }

      .circle2 {
        animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -5.4s infinite alternate,
          animY 6s cubic-bezier(0.36, 0, 0.64, 1) -2.4s infinite alternate;
          scale 12s cubic-bezier(0.36, 0, 0.64, 1) -2.4s infinite alternate;
      }

      .circle3 {
        animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -7.8s infinite alternate,
          animY 6s cubic-bezier(0.36, 0, 0.64, 1) -4.8s infinite alternate;
          scale 12s cubic-bezier(0.36, 0, 0.64, 1) -4.8s infinite alternate;
      }

      .circle4 {
        animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -10.2s infinite alternate,
          animY 6s cubic-bezier(0.36, 0, 0.64, 1) -7.2s infinite alternate;
           scale 12s cubic-bezier(0.36, 0, 0.64, 1) -7.2s infinite alternate;
      }

      .circle5 {
        animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -12.6s infinite alternate,
          animY 6s cubic-bezier(0.36, 0, 0.64, 1) -9.6s infinite alternate;
           scale 12s cubic-bezier(0.36, 0, 0.64, 1) -9.6s infinite alternate;
      }

x和y轴动画加起来是12s , 12/5 等于 2.4 每个圆y轴 -=2.4s,x轴与y差6/2s,设置x轴延迟为动画时长的一半,放大缩小，scale动画应该是X轴和Y轴的时间总和,，scale动画延迟等于x轴的动画延时
第一个圆设置y轴的动画延迟0s,x轴的动画延迟为-3s
第二个圆设置y轴的动画延迟-2.4s,x轴的动画延迟为-5.4s
第三个圆设置y轴的动画延迟-4.8s,x轴的动画延迟为-7.8s
依次类推即可

如果椭圆轨迹上只有一个圆，部分代码如下

.circle1 {
        animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate,
          animY 6s cubic-bezier(0.36, 0, 0.64, 1)  0s infinite alternate;
      }

或

.circle1 {
        animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
          animY 6s cubic-bezier(0.36, 0, 0.64, 1)  -3s infinite alternate
      }

L.@

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
4
评论
css 围绕椭圆轨迹旋转

代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body { display: flex; just...
复制链接

扫一扫