html和css 实现元素顺时针旋转效果（椭圆形旋转轨迹）

一 实现效果

二 实现代码 

        我自己是用react写的。

        1. react 代码如下：

import React from "react";
import styles from "./index.less";

export default () => {
  return <div className={styles.containers}>

    <div className={styles.centerDiv}>
      <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="textGradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style={{stopColor: "red", stopOpacity: 1}}/>
            <stop offset="100%" style={{stopColor: "yellow", stopOpacity: 1}}/>
          </linearGradient>

          <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
            <feDropShadow dx="0" dy="6" stdDeviation="5" floodColor="rgba(0,0,0,0.5)"/>
          </filter>

        </defs>

        <text x="60" y="30" fontSize="18" fontFamily="Arial" fill="url(#textGradient)" fontWeight={700}
              filter="url(#shadow)"
        >
          这是中心点
        </text>
      </svg>
    </div>

    <div className={styles.rotatingElement}>元素1</div>
    <div className={styles.rotatingElement}>元素2</div>
    <div className={styles.rotatingElement}>元素3</div>
    <div className={styles.rotatingElement}>元素4</div>
    <div className={styles.rotatingElement}>元素5</div>
    <div className={styles.rotatingElement}>元素6</div>
    <div className={styles.rotatingElement}>元素7</div>
    <div className={styles.rotatingElement}>元素8</div>
    <div className={styles.rotatingElement}>元素9</div>
    <div className={styles.rotatingElement}>元素10</div>
    <div className={styles.rotatingElement}>元素11</div>
    <div className={styles.rotatingElement}>元素12</div>
    <div className={styles.rotatingElement}>元素13</div>
  </div>
}

2. css 代码如下：

.containers {
  width: 100%;
  height: calc(100vh - 55px);
  background: #1677ff;
  display: flex;
  align-items: center;
  justify-content: center;

  .centerDiv {
    position: absolute;
    top: calc(50% - 60px);
    left: calc(50% - 90px);
  }
}

.rotatingElement {
  position: absolute;
  width: 150px;
  height: 150px;
  left: 45%;
  top: 36%;
  transform-origin: 0 0;
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: 700;
  font-size: 20px;
  color: red;
  background: powderblue;
  border-radius: 50%;
}

/* 为13个元素设置不同的初始角度和动画延迟 */
.rotatingElement:nth-child(2) {
  animation: orbit 40s linear infinite;
  animation-delay: 0s;
}

.rotatingElement:nth-child(3) {
  animation: orbit 40s linear infinite;
  animation-delay: -3.08s;
}

.rotatingElement:nth-child(4) {
  animation: orbit 40s linear infinite;
  animation-delay: -6.16s;
}

.rotatingElement:nth-child(5) {
  animation: orbit 40s linear infinite;
  animation-delay: -9.24s;
}

.rotatingElement:nth-child(6) {
  animation: orbit 40s linear infinite;
  animation-delay: -12.32s;
}

.rotatingElement:nth-child(7) {
  animation: orbit 40s linear infinite;
  animation-delay: -15.4s;
}

.rotatingElement:nth-child(8) {
  animation: orbit 40s linear infinite;
  animation-delay: -18.48s;
}

.rotatingElement:nth-child(9) {
  animation: orbit 40s linear infinite;
  animation-delay: -21.56s;
}

.rotatingElement:nth-child(10) {
  animation: orbit 40s linear infinite;
  animation-delay: -24.64s;
}

.rotatingElement:nth-child(11) {
  animation: orbit 40s linear infinite;
  animation-delay: -27.72s;
}

.rotatingElement:nth-child(12) {
  animation: orbit 40s linear infinite;
  animation-delay: -30.8s;
}

.rotatingElement:nth-child(13) {
  animation: orbit 40s linear infinite;
  animation-delay: -33.88s;
}

.rotatingElement:nth-child(14) {
  animation: orbit 40s linear infinite;
  animation-delay: -36.96s;
}

/* 悬停效果 */
.rotatingElement::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: gold;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

/* 悬停效果 */
.rotatingElement:hover::before {
  opacity: 1;
}

/* 当任何旋转元素被悬停时，暂停所有旋转元素的动画 */
.containers:hover .rotatingElement {
  animation-play-state: paused !important;
}

@keyframes orbit {
  0% {
    transform: translate(calc(530px * cos(0deg)), calc(290px * sin(0deg)));
  }
  10% {
    transform: translate(calc(530px * cos(36deg)), calc(290px * sin(36deg)));
  }
  20% {
    transform: translate(calc(530px * cos(72deg)), calc(290px * sin(72deg)));
  }
  30% {
    transform: translate(calc(530px * cos(108deg)), calc(290px * sin(108deg)));
  }
  40% {
    transform: translate(calc(530px * cos(144deg)), calc(290px * sin(144deg)));
  }
  50% {
    transform: translate(calc(530px * cos(180deg)), calc(290px * sin(180deg)));
  }
  60% {
    transform: translate(calc(530px * cos(216deg)), calc(290px * sin(216deg)));
  }
  70% {
    transform: translate(calc(530px * cos(252deg)), calc(290px * sin(252deg)));
  }
  80% {
    transform: translate(calc(530px * cos(288deg)), calc(290px * sin(288deg)));
  }
  90% {
    transform: translate(calc(530px * cos(324deg)), calc(290px * sin(324deg)));
  }
  100% {
    transform: translate(calc(530px * cos(360deg)), calc(290px * sin(360deg)));
  }
}