如何实现环形图片旋转到指定位置暂停并展示对应内容？

我想用CSS animation实现环形容器旋转，要求容器旋转到指定位置后暂停一段时间，同时展示对应位置图片的专属内容，但现在容器一直在持续旋转，不知道怎么实现暂停和内容切换。

纯CSS的keyframes很难精准控制多段暂停+内容联动，结合JavaScript能更灵活地实现需求。下面是修改后的完整代码：

修改后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转环形容器</title>
    <link rel="stylesheet" href="./rotate.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div id="parent-circle">
        <div class="circle blue" data-content-id="content-blue"></div>
        <div class="circle pink" data-content-id="content-pink"></div>
        <div class="circle lime" data-content-id="content-lime"></div>
        <div class="circle orange" data-content-id="content-orange"></div>
    </div>
    <div class="mt-5 content-container pt-2">
        <!-- 对应每个色块的专属内容 -->
        <div id="content-blue" class="content active">
            <h1>健康档案</h1>
            <p class="w-75">这是蓝色区块对应的健康档案内容，包含个人健康数据记录。</p>
        </div>
        <div id="content-pink" class="content">
            <h1>运动数据</h1>
            <p class="w-75">这是粉色区块对应的运动数据内容，记录每日运动时长、步数等信息。</p>
        </div>
        <div id="content-lime" class="content">
            <h1>饮食记录</h1>
            <p class="w-75">这是绿色区块对应的饮食记录内容，追踪每日摄入的营养成分。</p>
        </div>
        <div id="content-orange" class="content">
            <h1>睡眠分析</h1>
            <p class="w-75">这是橙色区块对应的睡眠分析内容，展示睡眠质量、深度睡眠时间等数据。</p>
        </div>
    </div>
    <script src="./rotate.js"></script>
</body>
</html>

修改后的CSS代码 #

body {
  width: 90vw;
  height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#parent-circle {
  position: relative;
  width: 20vw;
  height: 20vw;
  border: 0.4vw solid rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  /* 移除原自动循环动画，由JS控制旋转时机 */
  transition: transform 0.7s linear;
}

#parent-circle .circle {
  display: block;
  position: absolute;
  width: 30%;
  height: 30%;
  margin: -14%;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  cursor: pointer;
}

#parent-circle .circle.blue {
  background-color: #416ba9;
  transform: translate(10vw);
}

#parent-circle .circle.pink {
  background-color: #e6427a;
  transform: rotate(90deg) translate(10vw) rotate(-90deg);
  width: 50%;
  height: 50%;
  margin: -27%;
}

#parent-circle .circle.lime {
  background-color: #cddb00;
  transform: rotate(180deg) translate(10vw) rotate(-180deg);
}

#parent-circle .circle.orange {
  background-color: #e0592a;
  transform: rotate(270deg) translate(10vw) rotate(-270deg);
}

.content-container {
  margin-left: 20%;
}

/* 内容默认隐藏，仅显示带active类的内容 */
.content {
  display: none;
}

.content.active {
  display: block;
}

新增的JavaScript代码（rotate.js） #

const parentCircle = document.getElementById('parent-circle');
const contentItems = document.querySelectorAll('.content');
const circles = document.querySelectorAll('.circle');

// 每个色块对应的目标旋转角度
const rotationAngles = [0, 90, 180, 270];
let currentIndex = 0;
const rotateDuration = 700; // 旋转动画时长（和CSS transition保持一致）
const pauseDuration = 3000; // 暂停停留时长（毫秒）

// 旋转到下一个位置并切换对应内容
function rotateToNextPosition() {
    currentIndex = (currentIndex + 1) % rotationAngles.length;
    const targetAngle = rotationAngles[currentIndex];
    
    // 执行旋转
    parentCircle.style.transform = `rotate(${targetAngle}deg)`;
    
    // 切换内容显示
    contentItems.forEach(item => item.classList.remove('active'));
    const targetContentId = circles[currentIndex].dataset.contentId;
    document.getElementById(targetContentId).classList.add('active');
}

// 初始加载显示第一个内容
document.getElementById(circles[0].dataset.contentId).classList.add('active');

// 自动循环旋转+暂停
setInterval(() => {
    rotateToNextPosition();
}, rotateDuration + pauseDuration);

// 支持点击色块直接切换到对应位置
circles.forEach((circle, index) => {
    circle.addEventListener('click', () => {
        currentIndex = index;
        const targetAngle = rotationAngles[currentIndex];
        parentCircle.style.transform = `rotate(${targetAngle}deg)`;
        
        contentItems.forEach(item => item.classList.remove('active'));
        document.getElementById(circle.dataset.contentId).classList.add('active');
    });
});

关键改动说明 #

1. 移除CSS自动循环动画：删除原CSS中的animation: rotate 20s infinite linear;，改用JS精准控制旋转角度和时机。
2. 新增内容区块：为每个色块创建专属内容容器，通过active类控制显示/隐藏。
3. 数据绑定：给每个色块添加data-content-id属性，关联对应内容容器ID，方便内容切换时匹配。
4. JS控制逻辑：
   • 定义固定旋转角度（0/90/180/270度），确保容器旋转到精准位置。
   • 用setInterval实现「旋转→暂停→旋转」的循环，时长参数可自由调整。
   • 支持点击色块直接切换到对应位置，提升交互体验。
5. 内容联动：每次旋转完成后，自动切换到对应色块的专属内容，通过添加/移除active类实现显示切换。

内容的提问来源于stack exchange，提问作者Bollampalli Vinaykumar1119