代码之家 › 专栏 › 技术社区 › provance

如何平滑切换背景渐变

css-animations css html

provance · 技术社区 · 3 年前

尝试从平滑地更改背景梯度 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>

1 回复 | 直到 3 年前

Nick Vu 3 年前

你可以增加 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%;
    }
}