如何实现按钮悬停时文字从按钮中心放大且按钮缩小的交互效果？

核心问题分析 #

1. 文字定位错误：原代码中<span>相对于整个按钮容器定位，导致从屏幕中心放大
2. 动画卡顿：使用font-size变化触发重排，且过渡属性用all增加性能开销

修改要点 #

• 调整DOM结构：将每个文字<span>移入对应按钮内部，使其相对于按钮定位
• 优化动画方式：用transform: scale()实现文字放大，利用GPU加速避免卡顿
• 明确过渡属性：指定具体过渡属性替代all，减少不必要的样式计算

修改后的代码 #

CSS部分

body {
  background-color: white;
}

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  gap: 2vw; /* 增加按钮间距，避免文字放大后重叠 */
}

.image-button {
  position: relative;
  overflow: hidden;
  width: 10vw;
  height: 10vw;
  background: none;
  border: none;
  cursor: pointer;
}

.image-button img {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease; /* 明确过渡属性 */
}

.image-button:hover img {
  transform: scale(0.6); 
}

.image-button span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.25); /* 初始缩小状态，对应原8vh/32vh的比例 */
  font-size: 32vh; /* 固定最终字体大小，用scale控制缩放 */
  opacity: 0;
  z-index: 2;
  mix-blend-mode: difference;
  color: white;
  transition: transform 0.5s ease, opacity 0.5s ease; /* 同步过渡时长，保持流畅 */
  pointer-events: none; /* 避免文字干扰按钮 hover 事件 */
}

.image-button:hover span {
  transform: translate(-50%, -50%) scale(1); /* 放大到原始大小 */
  opacity: 1;
}

HTML部分

<div class="button-container">
  <button class="image-button">
    <img src="https://images.squarespace-cdn.com/content/v1/55fc0004e4b069a519961e2d/1442590746571-RPGKIXWGOO671REUNMCB/image-asset.gif" alt="Button Image">
    <span>text1</span>
  </button>
  <button class="image-button">
    <img src="https://images.squarespace-cdn.com/content/v1/55fc0004e4b069a519961e2d/1442590746571-RPGKIXWGOO671REUNMCB/image-asset.gif" alt="Button Image">
    <span>text2</span>
  </button>
  <button class="image-button">
    <img src="https://images.squarespace-cdn.com/content/v1/55fc0004e4b069a519961e2d/1442590746571-RPGKIXWGOO671REUNMCB/image-asset.gif" alt="Button Image">
    <span>text3</span>
  </button>
  <!-- 可继续添加剩余3个按钮 -->
</div>

额外优化说明 #

• 添加gap属性给按钮容器，避免文字放大后相互重叠
• 给按钮添加cursor: pointer提示可交互
• 给文字span添加pointer-events: none，防止文字遮挡按钮的hover事件
• 同步图片和文字的过渡时长（0.5s），让动画节奏更统一

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