在实现启动页（splash screen）时，为标题添加 transform: scale() 悬浮效果常因父容器未正确设置 flex 布局或错误使用 transform: translateY 而引发元素跳动。本文提供可复用的 CSS 修复方案，确保缩放平滑、定位稳定。
在实现启动页（splash screen）时，为标题添加 `transform: scale()` 悬浮效果常因父容器未正确设置 flex 布局或错误使用 `transform: translatey` 而引发元素跳动。本文提供可复用的 css 修复方案，确保缩放平滑、定位稳定。
要让 .splash-header 在悬停时仅放大而不发生位移，关键在于分离布局定位与动画变换：transform 属于“重绘型”属性，当它与 transform 相关的初始偏移（如 transform: translateY(30%)）共存时，浏览器会将多次 transform 合并计算，导致缩放中心点偏移、视觉上“弹跳至顶部”。
✅ 正确做法是：
-
将居中逻辑交给父容器（
.splash）的 Flexbox 控制，而非子元素自身； -
移除子元素（
.splash-header）上任何初始transform，仅保留悬停时的scale()； -
为缩放添加显式
transition，确保动画平滑。
以下是优化后的核心 CSS 片段：
.splash {
cursor: none;
background: black;
height: 100vh; /* 推荐使用 vh 替代 %，避免嵌套高度塌陷 */
width: 100%;
display: flex;
justify-content: center;
align-items: center; /* ✅ 真正的垂直+水平居中 */
margin: 0; /* 清除默认外边距干扰 */
}
.splash-header {
color: white;
font-size: 1.8rem;
margin: 0; /* 防止浏览器默认 h1 外边距影响 */
transition: transform 0.6s ease-in-out; /* ✅ 仅过渡 transform，更高效 */
}
.splash-header:hover {
transform: scale(1.5); /* ✅ 无位移缩放：缩放中心默认为元素中心 */
}
⚠️ 注意事项：
- 不要再对
.splash使用transform: translateY(-300px)或top/right定位——这会破坏 flex 居中逻辑，且与transform动画冲突； - 若需微调标题位置，优先使用
margin或padding，而非transform（后者专用于动画）； -
align-content: center对单行 flex 容器无效，应使用align-items: center； - 为保障兼容性，建议为
.splash-header显式设置font-size和line-height，避免缩放后文字溢出或基线抖动。
? 进阶提示：若后续需配合 JavaScript 实现点击隐藏 splash 屏，可结合 opacity + visibility 实现淡出效果，并在动画结束后添加 .hidden 类：
document.querySelector('.splash').addEventListener('click', () => {
document.querySelector('.splash').style.opacity = '0';
setTimeout(() => {
document.querySelector('.splash').classList.add('hidden');
}, 600); // 与 transition 时间一致
});
通过以上调整，你的“Press Here...”标题将在悬停时稳定放大、无跳动，符合专业 UI 交互动效标准。
