如何实现文字绕中心图片旋转时覆盖区域变色的动画效果？

下面提供两种实用方案，根据你的动画实现方式选择：

方案一：纯CSS关键帧控制（适合固定轨迹） #

如果你的文字圆周运动是用CSS @keyframes + transform: rotate()实现的，直接在动画关键帧里对应图片上方的角度区间修改文字颜色即可。

举个例子，假设动画周期是10s，图片上方对应旋转角度的-45°到45°区间（约占动画的1/4周期），代码参考：

.text-circle {
  position: absolute;
  animation: circle-move 10s linear infinite;
  color: #333; /* 初始颜色 */
}

@keyframes circle-move {
  0% {
    transform: rotate(0deg) translateX(150px) rotate(0deg);
    color: #333;
  }
  /* 进入图片上方区域前保持原色 */
  20% {
    color: #333;
  }
  /* 到达图片上方时切换颜色 */
  25% {
    color: #ff4444;
  }
  /* 在上方区域内保持变色状态 */
  30% {
    color: #ff4444;
  }
  /* 离开上方区域后恢复原色 */
  35% {
    color: #333;
  }
  100% {
    transform: rotate(360deg) translateX(150px) rotate(-360deg);
    color: #333;
  }
}

注：百分比和角度需要根据你的实际动画周期、圆周半径调整，确保颜色切换时机正好对应文字处于图片上方的时间段。可以通过浏览器开发者工具的动画调试面板，精准定位关键帧节点。

方案二：JavaScript动态判断（适合复杂/动态轨迹） #

如果轨迹不固定，或者需要更精准的位置判断，用JS监听动画帧，实时对比文字与图片的位置：

1. 先获取图片的位置和尺寸，定义上方判定区域：

const img = document.querySelector('.center-img');
const text = document.querySelector('.text-circle');
const imgRect = img.getBoundingClientRect();
// 定义图片上方的判定范围：覆盖图片正上方，高度包含文字自身高度
const topArea = {
  top: imgRect.top - text.offsetHeight,
  bottom: imgRect.top,
  left: imgRect.left,
  right: imgRect.right
};

2. 用requestAnimationFrame监听每一帧，动态切换颜色：

function checkTextPosition() {
  const textRect = text.getBoundingClientRect();
  // 判断文字是否完全进入图片上方的横向+纵向范围
  const isInTopArea = 
    textRect.bottom <= topArea.bottom && 
    textRect.top >= topArea.top &&
    textRect.left >= topArea.left &&
    textRect.right <= topArea.right;
  
  text.style.color = isInTopArea ? '#ff4444' : '#333';
  requestAnimationFrame(checkTextPosition);
}

// 启动监听
checkTextPosition();

注：如果文字是CSS动画驱动的，requestAnimationFrame会自动跟随动画帧执行，无需额外绑定动画事件。

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