css3的animation制作围绕椭圆轨道旋转，近大远小的动画

css3的animation制作围绕椭圆轨道旋转，近大远小的动画

• • 布局
  • 中间旋转的两个轨道
  • 四个方形旋转

布局

<div className={`${style["animate-icon"]} `}  >
       {/* <!-- 外侧圆环div --> */}
      <div className={`${style.flat} ${style['circle-outer']}`}>
         <div className={style.content}></div>
      </div>
     {/* <!-- 内侧圆环div --> */}
       <div className={`${style['flat']} ${style['circle-inner']}`}>
          <div className={style.content}></div>
        </div>
        <div className={`${style['work']}`}>
           <div className={style.content}>{titles}</div>
         </div>
        <div className={chooseStyle}>
           {
            arr && arr.map((v, i) => {
              return <div key={i} className={`${style[`circle-ball${i + 1}`]} ${style[extralClass]}`}>
              <div className={style.rotateText} onClick={() => this.openSecondPage(v.name)}>
               <p>{arr[i].name}</p>
               <p>{arr[i].value}</p>
             </div>
            </div>
         })
     }
  </div>

中间旋转的两个轨道

.animate-icon {
  display: flex;
  justify-content: center;
  align-items: center; 
}

/* 压缩div高度，将正圆变为椭圆 */
.flat {
  transform: scaleY(0.45);
}

.work {
  position: absolute; 
  color: #f4fefc;
  font-size: 22px;
}

.circle-outer {
  position: relative; 
  bottom: 0;
}

.circle-outer .content {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  /* 圆锥渐变 */
  // background: conic-gradient(fuchsia, pink, orange, gold, snow);
  background: conic-gradient(#89b8e4, #23d7e2, #5aa3e7, #00f9f6, #0edee7);
  /* 将圆中心“掏空”变成圆环 */
  --mask: radial-gradient(closest-side, transparent 90%, black 90%);
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  animation: spin 4s linear infinite;
}

.circle-inner {
  position: absolute; 
}

.circle-inner .content {
  width: 150px;
  height: 150px;
  border-radius: 75px;
  background: conic-gradient(#e1e1ea 40%, #d5e0e0 72%, #7f8888 88%, #9d9db6);
  // background: conic-gradient(blue 40%, teal 72%, cyan 88%, blue);
  --mask: radial-gradient(closest-side, transparent 94%, black 94%);
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  animation: spin-r 4s linear infinite;
}

.circleInfo {
  position: absolute;
 

}

四个方形旋转

.circle-ball1 {
    .circleInfo();
    animation:
      animX 6s cubic-bezier(0.7, 0, 0.3, 1) -3s infinite alternate,
      animY 6s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
      spin-ball 12s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;

  }

  .circle-ball2 {
    .circleInfo();
    animation:
      animX 6s cubic-bezier(0.7, 0, 0.3, 1) -6s infinite alternate,
      animY 6s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate,
      spin-ball 12s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate;
  }

  .circle-ball3 {
    .circleInfo();
    animation:
      animX 6s cubic-bezier(0.7, 0, 0.3, 1) -9s infinite alternate,
      animY 6s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,
      spin-ball 12s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate;
  }

  .circle-ball4 {
    .circleInfo();
    animation:
      animX 6s cubic-bezier(0.7, 0, 0.3, 1) -12s infinite alternate,
      animY 6s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate,
      spin-ball 12s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate;
  }