如何仅使用CSS实现三角形动画及移动三角形背景效果

我来帮你搞定这个CSS三角形背景动画！你现在已经能做出单个三角形了，接下来我们把它扩展成铺满页面的流动背景效果，而且页面加载完成后会自动启动动画。先看看怎么优化你的代码并实现需求：

步骤1：重构HTML结构 #

首先简化你的HTML，把重复的三角形元素统一用.triangle类，避免冗余代码：

<div class="bg-container">
  <div class="triangle up"></div>
  <div class="triangle down-right"></div>
  <div class="triangle down-right"></div>
  <div class="triangle down-left"></div>
  <div class="triangle up"></div>
  <div class="triangle down-right"></div>
  <div class="triangle down-left"></div>
  <!-- 可以根据需要添加更多三角形，数量越多背景效果越饱满 -->
</div>

步骤2：统一并优化CSS基础样式 #

把重复的三角形样式统一到.triangle类，同时把背景容器改成全屏，作为底层背景不干扰页面其他内容：

/* 全屏背景容器，作为动画载体 */
.bg-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: -1; /* 放在页面所有内容下方 */
}

/* 统一三角形基础样式 */
.triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  opacity: 0.7; /* 增加透明度，让叠加效果更自然柔和 */
  animation: float 8s infinite ease-in-out; /* 绑定动画，页面加载自动启动 */
}

/* 不同方向/颜色的三角形样式 */
.triangle.up {
  border-bottom: 100px solid rgb(165,60,255);
}

.triangle.down-right {
  border-top: 100px solid rgb(98,0,255);
  transform: rotate(45deg); /* 旋转出不同方向的三角形 */
}

.triangle.down-left {
  border-top: 100px solid #c85e5e;
  transform: rotate(-45deg);
}

步骤3：添加流动动画效果 #

定义@keyframes让三角形实现从底部向上流动、旋转、缩放的连贯动画，同时给每个三角形设置不同的动画延迟，避免同步运动，营造错落的流动感：

@keyframes float {
  0% {
    transform: translateY(100vh) rotate(0deg) scale(0.8);
    opacity: 0; /* 初始状态在页面底部外，完全透明 */
  }
  20% {
    opacity: 0.7; /* 进入页面后显示 */
  }
  80% {
    opacity: 0.7; /* 保持显示状态 */
  }
  100% {
    transform: translateY(-100px) rotate(360deg) scale(1.2);
    opacity: 0; /* 移出页面顶部时透明消失 */
  }
}

/* 给每个三角形设置不同的初始位置和动画延迟 */
.bg-container .triangle:nth-child(1) {
  left: 10%;
  animation-delay: 0s;
}
.bg-container .triangle:nth-child(2) {
  left: 30%;
  animation-delay: 1s;
}
.bg-container .triangle:nth-child(3) {
  left: 50%;
  animation-delay: 2s;
}
.bg-container .triangle:nth-child(4) {
  left: 70%;
  animation-delay: 3s;
}
.bg-container .triangle:nth-child(5) {
  left: 90%;
  animation-delay: 0.5s;
}
.bg-container .triangle:nth-child(6) {
  left: 20%;
  animation-delay: 1.5s;
}
.bg-container .triangle:nth-child(7) {
  left: 60%;
  animation-delay: 2.5s;
}

关键细节说明 #

• 容器用fixed定位+全屏尺寸，确保覆盖整个页面背景，z-index: -1避免遮挡页面内容
• 动画从页面底部外开始，向上流动并伴随旋转、缩放，配合透明度变化让过渡更自然
• 不同的animation-delay让三角形错落运动，不会显得呆板
• 页面加载时动画会自动启动，因为我们直接给.triangle绑定了animation属性

你可以根据需求调整三角形的数量、颜色、动画时长、大小，来匹配你想要的视觉效果~

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