如何通过CSS与HTML实现四色渐变动画的方块位移效果？

首先修正你代码里的基础问题：你重复定义了.gradient__block--3选择器，导致第四个颜色未生效；另外方块没有设置尺寸，也缺少位移动画的核心逻辑。下面是完整的实现方案，通过方块上下位移配合模糊、颜色混合来还原目标动画效果：

核心实现思路 #

• 给每个彩色方块设置固定尺寸，通过CSS动画实现上下往复位移
• 给容器添加overflow: hidden，避免模糊后的边缘溢出
• 给不同方块设置差异化的动画延迟，形成错落的流动感
• 可选添加mix-blend-mode: multiply，让颜色混合更接近目标渐变的自然过渡

完整代码 #

/* 容器样式：限制尺寸、溢出隐藏、模糊效果 */
.gradient__wrapper {
  display: flex;
  width: 400px;
  height: 300px;
  overflow: hidden;
  filter: blur(1.5rem);
}

/* 统一方块样式：固定宽高、动画基础配置 */
.gradient__block {
  flex: 1;
  animation: flow 3s ease-in-out infinite alternate;
  mix-blend-mode: multiply; /* 优化颜色混合效果，可按需移除 */
}

/* 每个方块的专属颜色 */
.gradient__block--1 {
  background-color: #e7402c;
  animation-delay: 0s;
}

.gradient__block--2 {
  background-color: #43ba88;
  animation-delay: 0.5s;
}

.gradient__block--3 {
  background-color: #50ccf1;
  animation-delay: 1s;
}

.gradient__block--4 {
  background-color: #704fee;
  animation-delay: 1.5s;
}

/* 上下位移的动画关键帧 */
@keyframes flow {
  from {
    transform: translateY(-20%);
  }
  to {
    transform: translateY(20%);
  }
}

<section class="gradient__wrapper">
  <div class="gradient__block gradient__block--1"></div>
  <div class="gradient__block gradient__block--2"></div>
  <div class="gradient__block gradient__block--3"></div>
  <div class="gradient__block gradient__block--4"></div>
</section>

细节调整说明 #

• 修改@keyframes里的translateY百分比，可调整方块的位移幅度
• 调整animation-duration和animation-delay的值，能控制动画的快慢节奏和错落感
• 模糊值blur()可根据容器尺寸微调，让渐变过渡更自然
• 若不需要颜色混合效果，直接移除mix-blend-mode属性即可

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