如何消除 CSS 悬停缩放时的闪烁（flicker）问题-js教程-PHP中文网

如何消除 CSS 悬停缩放时的闪烁（flicker）问题

通过为元素添加 transform-origin: center center 并将过渡缓动函数设为 ease，可有效消除因缩放中心偏移导致的悬停切换闪烁，实现平滑、自然的缩放动画。

通过为元素添加 transform-origin: center center 并将过渡缓动函数设为 ease，可有效消除因缩放中心偏移导致的悬停切换闪烁，实现平滑、自然的缩放动画。

在使用 transform: scale() 实现悬停缩放效果时，若未显式指定缩放原点（transform-origin），浏览器默认以元素左上角（0 0）为缩放中心。当鼠标快速在左右两个相邻 .ChoseContainer 之间来回移动时，由于每个容器的缩放中心不一致（尤其在边界区域），会导致视觉上的“跳变”或“闪烁”——这正是你 GIF 中呈现的不流畅现象。

解决方法非常简洁但关键：统一缩放中心 + 合理缓动函数。以下是优化后的完整 CSS：

.Container {
  display: flex;
  flex: 1;
  flex-direction: row;
  position: relative;
  justify-content: center;
}

.ChoseContainer {
  width: 50%;
  height: 100vh;
  text-align: center;
  font-size: 300%;
  /* 关键修复：指定缩放中心为元素正中心 */
  transform-origin: center center;
  /* 关键修复：使用 ease 缓动，比默认 linear 更自然 */
  transition: transform 0.2s ease;
}

.ChoseContainer:hover {
  transform: scale(1.1);
}

.Text {
  margin-top: 70vh;
}

.Title {
  position: absolute;
  background-color: transparent;
  font-size: 600%;
  margin-top: 15vh;
  mix-blend-mode: difference;
  color: aliceblue;
  z-index: 99;
}

✅ 为什么这样能解决问题？

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

transform-origin: center center 确保无论鼠标从哪个方向进入，缩放都围绕元素几何中心均匀展开/收拢，避免边缘拉伸抖动；
transition: ... ease 替代默认的 ease（实际多数浏览器默认即为 ease，但显式声明更可靠），提供更符合人眼感知的加减速动画，显著提升流畅感；
移除冗余样式（如重复的 position: relative 或未使用的 z-index 冲突）也能减少渲染不确定性。

? 进阶建议：