css实现椭圆轨迹旋转

实现原理：animation动画+贝塞尔曲线让图片旋转起来，js是鼠标移入让动画暂停。

 css:

/* 旋转动画 */
    .animate {
      width: 420px;
      height: 300px;
      border-radius: 50%;
      position: absolute;
      left: 10px;
      top: 20px;
      }
    @keyframes animX{
      0% {left: -20px;}
    100% {left: 340px;}
    }
    @keyframes animY{
      0% {top: -30px;}
    100% {top: 200px;}
    }
    @keyframes scale {
      0% {
        transform: scale(0.7)
      }
      50% {
        transform: scale(1.2)
      }
      100% {
        transform: scale(0.7)
    }
    }
    .ball {
      width: 100px;
      height: 100px;
      position: absolute;
      display:flex;
      flex-direction: column;
      align-items:center;
      justify-content:center;
      font-size: 12px;
    }
    .ball img:hover{
      transform: scale(1.2);
    }
    .ball img{
      width: 70px;
      height: 70px;
      margin-bottom: 10px;
    }
    /* 6个图x和y轴动画加起来是18s , 18s/6 等于 3s
    每个球y轴动画延迟 从0递减3s,x轴与y轴相差动画时长的一半（9s/2） */
    .ball1 {
      animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -4.5s infinite alternate,
      animY 9s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
      scale 18s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
    }
    .ball2 {
      animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -7.5s infinite alternate,
      animY 9s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate,
      scale 18s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate;
    }
    .ball3 {
      animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -10.5s infinite alternate,
      animY 9s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,
      scale 18s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate;
    }
    .ball4 {
      animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -13.5s infinite alternate,
      animY 9s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate,
      scale 18s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate;
    }
    .ball5 {
      animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -16.5s infinite alternate,
      animY 9s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate,
      scale 18s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate;
    }
    .ball6 {
      animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -19.5s infinite alternate,
      animY 9s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate,
      scale 18s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate;
    }

div结构:

<div class="container">
    <!-- 旋转动画 -->
    <div class="animate">
      <div class="ball ball1">
        <img src="img/ball.jpg">
        <p>1</p>
      </div>
      <div class="ball ball2">
        <img src="img/ball.jpg">
        <p>2</p>
      </div>
      <div class="ball ball3">
        <img src="img/ball.jpg">
        <p>3</p>
      </div>
      <div class="ball ball4">
        <img src="img/ball.jpg">
        <p>4</p>
      </div>
      <div class="ball ball5">
        <img src="img/ball.jpg">
        <p>5</p>
      </div>
      <div class="ball ball6">
        <img src="img/ball.jpg">
        <p>6</p>
      </div>
    </div>

js:

var items = document.getElementsByClassName("ball");
      //console.log(items)
      for (var i = 0; i < items.length; i++) {
        items[i].addEventListener('click', function () {
          console.log(this)
        })
      }
      for (var i = 0; i < items.length; i++) {
        items[i].addEventListener('mouseover', function () {
          for (j = 0; j < items.length; j++) {
            items[j].style.animationPlayState = "paused";
          }

        })
        items[i].addEventListener('mouseout', function () {
          for (j = 0; j < items.length; j++) {
            items[j].style.animationPlayState = "running";
          }
        })
      }

转载博客：css3实现沿椭圆轨迹旋转动画 - 简书