Splash Screen头部hover时scale变换导致位置偏移问题求助

问题 #

开发本科学习测验应用时，实现点击消失的启动闪屏，为.splash-header设置transform: scale(1.5)的hover效果时，文本会跳至容器顶部，无法实现原地平滑放大。

解决方案 #

核心问题是原代码中.splash-header用transform: translateY(30%)定位，hover时transform: scale(1.5)会覆盖该属性，导致位置偏移。通过调整布局方式修复：

修改后的完整代码 #

HTML（无需修改）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QuiZA</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
     <div class="container">
        <h1 class="frontlogo">QuiZA Logo </h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit ducimus libero culpa ipsum cupiditate quasi accusantium quibusdam soluta, dolorem iure sapiente ut consectetur cum minus id repellat amet perspiciatis fuga?</p>
        <!--Loading screen will start after this-->
      <div class="splash">
        <h1 class="splash-header">Press Here...</h1>
    </div>
</div>
  
</body>
</html>

CSS

.container{
    background: darkgoldenrod;
    height: 100vh;
    width: 100%;
    display: grid;
}
.splash{
    cursor: pointer;
    background: black;
    height: 100%;
    width: 100%;
    /* 用flex布局居中内部元素，替代原有transform偏移 */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all ease-in-out 600ms;
}
.hidden{
    /* 用opacity+transform实现平滑消失，display:none无过渡效果 */
    opacity: 0;
    transform: scale(0);
    pointer-events: none;
    transition: all 0.6s ease-in-out;
}
.splash-header{
    color: white;
    /* 移除原有的transform: translateY(30%) */
    transition: transform 0.3s ease; /* 添加过渡动画 */
}
.splash-header:hover{
    transform: scale(1.5); /* 基于自身中心缩放，无位置偏移 */
}
.frontlogo{
    height: 90%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center; /* 补全垂直居中属性 */
}

JS（添加点击隐藏逻辑）

document.querySelector('.splash').addEventListener('click', function() {
    this.classList.add('hidden');
});

关键修改说明 #

1. 父级居中替代偏移：将.splash设为flex容器，通过justify-content和align-items让内部文本自动居中，避免用transform: translateY定位导致hover时属性被覆盖。
2. 平滑过渡设置：给.splash-header添加transform过渡，保证缩放动画流畅；修改.hidden类的实现方式，让闪屏消失时有平滑动画。
3. 原地缩放实现：此时scale(1.5)会以元素自身中心点为基准缩放，不会出现位置跳变。

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