实现类似Monopo网站的hover文本切换效果（仅在about div生效）

实现方案 #

HTML结构 #

每个交互项包含原始文本、替换文本和圆形背景层，全部放在#about容器内：

<div id="about">
  <div class="hover-item">
    <span class="original-text">我们的故事</span>
    <span class="hover-text">始于2012</span>
    <span class="circle"></span>
  </div>
  <div class="hover-item">
    <span class="original-text">团队成员</span>
    <span class="hover-text">15+创意人</span>
    <span class="circle"></span>
  </div>
  <!-- 可添加更多交互项 -->
</div>

CSS样式 #

通过前缀限定仅#about内元素生效，实现文本切换和圆形背景扩散动画：

/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

/* 目标容器样式 */
#about {
  padding: 2rem;
  gap: 2rem;
  display: flex;
  flex-direction: column;
}

/* 交互项基础布局 */
#about .hover-item {
  position: relative;
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 0.5rem 0;
  overflow: hidden;
}

/* 文本层样式 */
#about .original-text,
#about .hover-text {
  position: relative;
  z-index: 2;
  transition: opacity 0.3s ease;
}

#about .hover-text {
  position: absolute;
  top: 0.5rem;
  left: 0;
  opacity: 0;
}

/* 圆形背景样式 */
#about .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  background-color: #ff4d6d; /* 可自定义颜色 */
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 1;
}

/* 悬停触发状态 */
#about .hover-item:hover .original-text {
  opacity: 0;
}

#about .hover-item:hover .hover-text {
  opacity: 1;
}

#about .hover-item:hover .circle {
  transform: translate(-50%, -50%) scale(3);
}

JS优化（可选） #

让圆形背景大小适配文本宽度，效果更协调：

document.querySelectorAll('#about .hover-item').forEach(item => {
  const circle = item.querySelector('.circle');
  const textWidth = item.querySelector('.original-text').offsetWidth;
  // 设置圆形直径为文本宽度的1.5倍
  circle.style.width = `${textWidth * 1.5}px`;
  circle.style.height = `${textWidth * 1.5}px`;
});

自定义调整点 #

• 修改.circle的background-color可以更换圆形背景色
• 调整transition的时长和scale值，能改变动画的快慢和扩散范围
• 调整font-size等样式，适配你的页面排版

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