如何平滑切换背景渐变

Question

尝试将背景渐变平滑地从 gold-orange 更改为 orange-gold，反之亦然

问题 - 颜色突然改变，从一种颜色跳到另一种颜色

请帮忙

.box {
  width: 140px;
  height: 50px;
  background: linear-gradient(to right, gold, orange);
  animation: back infinite;
  animation-duration: 7s;
}

@keyframes back {
  0% {
    background: linear-gradient(to right, gold, orange);
  }
  50% {
    background: linear-gradient(to left, gold, orange);
  }
  100% {
    background: linear-gradient(to right, gold, orange);
  }
}

<div class='box'></div>

Answer 1

您可以增加 background-size 并使用 background-position 来制作动画

.box {
  width: 140px;
  height: 50px;
  background: linear-gradient(to right, gold, orange, gold);
  animation: back ease infinite;
  animation-duration: 7s;
  background-size: 200% 200%;
}

@keyframes back {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 0%;
    }
    100% {
        background-position: 0% 0%;
    }
}

<div class='box'></div>

如何平滑切换背景渐变

how to switch background gradient smoothly

html

css

css-animations