如何用CSS背景动画与Flex维持响应式页面布局？

问题分析 #

你当前的动画背景在添加内容后错位，核心原因是：

• 动画容器.lines使用position:absolute但未绑定到明确的父级定位容器，导致其位置随页面内容流动而偏移
• 内容未与背景层做分层处理，布局层级冲突

可以通过Flexbox构建整体布局，同时解决错位问题并实现响应式设计，以下是完整解决方案：

实现代码 #

HTML结构 #

<div class="page-container">
  <!-- 动画背景层 -->
  <div class="lines">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>
  <!-- 内容层（导航+标题） -->
  <div class="content">
    <nav class="navbar">
      <a href="#">首页</a>
      <a href="#">关于</a>
      <a href="#">联系</a>
    </nav>
    <h1>我的网站标题</h1>
  </div>
</div>

CSS样式 #

/* 基础重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #1a1a1a;
  color: #fff;
  font-family: Arial, sans-serif;
}

/* Flexbox主容器：占满视口高度，内容居中 */
.page-container {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

/* 动画背景层：绝对定位覆盖整个容器 */
.lines {
  position: absolute;
  inset: 0; /* 等价于top/right/bottom/left:0 */
  margin: auto;
  width: 90vw;
  pointer-events: none; /* 允许点击事件穿透到内容层 */
}

.line {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: 50%;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.line::after {
  content: "";
  display: block;
  position: absolute;
  height: 15vh;
  width: 100%;
  top: -50%;
  left: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%);
  animation: backAnimation 7s infinite forwards cubic-bezier(0.4, 0.26, 0, 0.97);
}

/* 三条竖线均匀分布 */
.line:nth-child(1) {
  transform: translateX(-25%);
}

.line:nth-child(1)::after {
  animation-delay: 2s;
}

.line:nth-child(3) {
  transform: translateX(25%);
}

.line:nth-child(3)::after {
  animation-delay: 2.5s;
}

/* 动画关键帧（原代码缺失，必须补充） */
@keyframes backAnimation {
  to {
    top: 100%;
  }
}

/* 内容层：Flexbox排版，置于背景上方 */
.content {
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.navbar {
  display: flex;
  gap: 1.5rem;
}

.navbar a {
  color: #fff;
  text-decoration: none;
  font-size: 1.1rem;
  transition: color 0.3s;
}

.navbar a:hover {
  color: #ccc;
}

h1 {
  font-size: 3rem;
}

/* 响应式适配 */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }
  
  .navbar {
    flex-direction: column;
    gap: 1rem;
  }
}

核心优化点 #

• 定位绑定：给主容器设置position:relative，让动画背景层的绝对定位基于该容器，彻底解决错位问题
• Flexbox布局：主容器用Flexbox实现内容垂直/水平居中，导航栏也用Flexbox排版，兼顾桌面和移动端
• 层级分离：内容层设置z-index:1，确保在动画背景上方；背景层添加pointer-events:none，不影响内容交互
• 响应式调整：通过媒体查询适配移动端，自动调整标题大小和导航布局
• 动画稳定性：用transform:translateX代替margin定位竖线，避免布局偏移

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