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 代码如下：

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)));}
}