动画 css 渐变数组

Question

我有一个父级 div 屏幕的宽度和设置的高度。我想为其中的等长小盒子制作动画。我想 'slide' 小盒子的颜色，父级 div 有一个渐变。这是我实现它的一种方式，每个盒子都是一个 div，宽度可变：

移动显示有问题，所以我需要一个新的解决方案。我知道用背景位置设置动画渐变是可能的，但是一次设置渐变部分的动画呢？

最终版本将在其中包含大约 100 个较小的盒子 div.I 我正在寻求建议，所以如果在 canvas 中这样做更有意义，请告诉我。

Answer 1

您可以将每个框作为一个单独的渐变，然后为该渐变的 background-size 设置动画。但是，我不建议这样做。动画 100 个渐变必然会对性能造成相当大的影响。正如为 100 个元素的 width 设置动画一样（在这种情况下，为每个 div 设置动画 scale() 变换会更好）。

如果 canvas 是一个选项，那么是的，使用 canvas，在这种情况下，无论是从可维护性还是从性能的角度来看，它都是一个更好的选择。

Answer 2

如果框的长度相等，您可以只对主要背景进行动画处理，使用步骤：（将鼠标悬停在 div）

.test {
  width: 600px;
  height: 50px;
  background-image: linear-gradient(90deg, yellow 50%, green 50%);
  background-size: 200% 100%;
  background-position: 0% 0;
  transition: background-position 40s steps(100);
}
.test:hover {
  background-position: -100% 0;
}

<div class="test"></div>

动画 css 渐变数组

animate css gradient array

css

linear-gradients