如何仅为网页背景添加动画效果而不影响页面内容？

嘿，我完全懂你的困扰——用反向缩放来抵消确实有点别扭，而且维护起来也麻烦。其实咱们可以换个思路：把背景单独做成一个独立的底层元素，让它在内容的下方动，这样内容就完全不受背景动画的影响啦！

核心思路 #

transform 会作用于元素本身以及它所有的子元素，所以之前的做法里，.header 的动画会带着里面的文字一起缩放。我们只需要把背景抽离成一个绝对定位的子元素，让它占满整个 header，然后只对这个背景元素加动画，内容元素放在它上面，就能完美解决问题。

修改后的代码 #

HTML 结构

<header class="header">
  <!-- 新增独立的背景层 -->
  <div class="header-bg"></div>
  <div class="header-text">
    <h1>Welcome to the Milky Way</h1>
  </div>
</header>

CSS 样式

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html, body{
  height: 100%;
  overflow: hidden;
}
.header{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  width: 100%;
  /* 改成相对定位，让内部绝对定位的背景层以它为基准 */
  position: relative;
  /* 移除原来的背景相关属性，交给header-bg */
}
/* 独立的背景层 */
.header-bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
  background:linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('bg.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* 只对背景层应用缩放动画 */
  animation: bg 60s linear forwards;
  /* 把背景层放在内容下方 */
  z-index: -1;
}
.header-text{
  color: white;
  /* 不用再写反向动画啦！ */
}
@keyframes bg{
  0%{transform: scale(1)}
  100%{transform: scale(1.5)}
}

为什么这个方案更好？ #

• 逻辑清晰：背景和内容分离，各自负责自己的功能，不会互相干扰
• 代码简洁：不需要维护反向的缩放动画，后期调整动画参数也更方便
• 性能更优：独立的背景层动画不会触发内容元素的重绘，性能表现更好

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