嘿，我来帮你搞定这个加载器的滑动效果！你的思路没问题，只需要补全动画关键帧、调整定位属性就能实现想要的效果，咱们一步步来：

核心原理 #

要让覆盖层向右滑动露出下方的Logo，需要通过CSS3的@keyframes定义动画的起始和结束状态，再把动画绑定到伪元素上，同时调整定位确保元素位置正确。

修改后的完整代码 #

<div class="outer">
  <div class="underlay">
    <img src="logo.png" alt="loading logo">
  </div>
</div>

.underlay {
  width: 300px;
  height: 300px;
  margin-left: 300px;
  margin-top: 15%;
  position: relative; /* 关键：让伪元素相对它定位 */
  overflow: hidden; /* 确保覆盖层滑出后不显示在容器外 */
}

.underlay:before {
  content: "";
  width: 100%; /* 用100%代替固定值，适配容器大小 */
  height: 100%;
  position: absolute;
  top: 0;
  left: 0; /* 初始位置覆盖整个Logo */
  z-index: 99;
  background: rgba(0, 0, 0, 0.9);
  /* 绑定动画 */
  animation-name: slide;
  animation-duration: 1.5s; /* 滑动时长，可按需调整 */
  animation-timing-function: ease-in-out; /* 动画缓动效果，更自然 */
  animation-fill-mode: forwards; /* 动画结束后保持最后状态 */
}

/* 定义滑动动画的关键帧 */
@keyframes slide {
  0% {
    left: 0; /* 初始位置：完全覆盖Logo */
  }
  100% {
    left: 100%; /* 结束位置：完全滑到容器右侧外面 */
  }
}

关键调整点说明 #

• 给.underlay添加position: relative：让伪元素的绝对定位基于这个父容器，而不是整个页面，避免位置偏移。
• 把伪元素的宽高改成100%：这样不管容器大小怎么变，覆盖层都能完全覆盖Logo，比固定值更灵活。
• 补全@keyframes slide：明确动画从左到右的位置变化，实现滑动效果。
• 添加动画属性：animation-duration控制滑动速度，animation-fill-mode: forwards确保动画结束后不会回弹到初始位置，animation-timing-function让滑动过程更顺滑。

如果想调整滑动的快慢，只需要修改animation-duration的数值就可以啦～

内容的提问来源于stack exchange，提问作者Ahtsham Ul Haq