在不冻结动画的情况下更改 css 线性渐变动画

Question

我的网站有一个线性渐变动画，我想要主题，所以我尝试使用 javascript 来更改 css 中的颜色，我让它做一些事情，但是当我这样做时它冻结了动画。

function changeBackground() {
   document.body.style.background = "linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB)";
 }

body {
 width: 100wh;
 height: 90vh;
 color: #fff;
 background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
 background-size: 400% 400%;
 -webkit-animation: Gradient 15s ease infinite;
 -moz-animation: Gradient 15s ease infinite;
 animation: Gradient 15s ease infinite;
    }

    @-webkit-keyframes Gradient {
 0% {
  background-position: 0% 50%
 }
 50% {
  background-position: 100% 50%
 }
 100% {
  background-position: 0% 50%
 }
    }

    @-moz-keyframes Gradient {
     0% {
  background-position: 0% 50%
 }
 50% {
  background-position: 100% 50%
 }
 100% {
  background-position: 0% 50%
 }
    }

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

  <a onclick="changeBackground()">Default</a>
  <a onclick="clickHandler()">Fire</a> // This will be implemented at a later time.

Answer 1

仅更改 background-image 而不是整个 background。更改背景将覆盖 background-size 并冻结动画。最好在 CSS 中定义 background-image 也可以避免其他问题。

您也可以去除前缀版本并简化动画，如下所示：

function changeBackground() {
  document.body.style.backgroundImage = "linear-gradient(-45deg, blue,red)";
}

body {
  width: 100wh;
  height: 90vh;
  color: #fff;
  background-image: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
  background-size: 400% 400%;
  animation: Gradient 15s ease infinite;
}

@keyframes Gradient {
  0%,100% {
    background-position: left
  }
  50% {
    background-position: right
  }
}

<a onclick="changeBackground()">Default</a>
<a onclick="clickHandler()">Fire</a> // This will be implemented at a later time.

您可以查看此答案以了解简化并了解更多详细信息，以防您需要不同的动画：

Answer 2

首先，由于您的 "a" 标签充当按钮而不是锚点，您应该使用按钮元素。其次，制作一个具有所需背景颜色的 class 并使用 onclick 事件触发它。（顺便说一句 body 宽度应该在 vw 上而不是你写的那样）

function changeBackground() {
   document.body.classList.add('changeBackground');
 }

body {
width: 100vw;
height: 90vh;
color: #fff;
background-image: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
0% {
    background-position: 0% 50%
}
50% {
    background-position: 100% 50%
}
100% {
    background-position: 0% 50%
}
}

@-moz-keyframes Gradient {
    0% {
    background-position: 0% 50%
}
50% {
    background-position: 100% 50%
}
100% {
    background-position: 0% 50%
}
}

@keyframes Gradient {
0% {
    background-position: 0% 50%
}
50% {
    background-position: 100% 50%
}
100% {
    background-position: 0% 50%
}
}
.changeBackground {
background-image: linear-gradient(-45deg, yellow, blue, red, green);
}

<button onclick="changeBackground()">Default</button>

***只是另一种方法。

祝你好运！

Answer 3

修复

这是因为您覆盖了动画的值。在 CSS 中，内联样式有一个 higher specificity than linked styles, and the background 属性是一个设置 background-image 和 background-position 的 shorthand。您通过 JavaScript 应用的样式正在设置比您的动画关键帧 更高特异性 的新值。要解决此问题，请设置 backgroundImage 而不是 background。

function changeBackground() {
   document.body.style.backgroundImage = "linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB)";
 }

body {
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
0% {
    background-position: 0% 50%
}
50% {
    background-position: 100% 50%
}
100% {
    background-position: 0% 50%
}
}

@-moz-keyframes Gradient {
    0% {
    background-position: 0% 50%
}
50% {
    background-position: 100% 50%
}
100% {
    background-position: 0% 50%
}
}

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

<a onclick="changeBackground()">Default</a>
<a onclick="clickHandler()">Fire</a> // This will be implemented at a later time.

一种改进的方法

更好的是 - 使用 CSS 类应用样式更改而不是通过 JavaScript 并完全避免特异性之争。这就是 CSS 的用途。

另外值得一提的是，<button> 是更适合用于行为的元素，因为锚点用于将用户发送到某个地方。

不过，如果您以编程方式提取线性渐变值，则这可能不是一个选项。

function setDefault() {
  document.querySelector('body').setAttribute('class', '');
};

function clickHandler() {
  document.querySelector('body').classList.add('fire');
};

body {
  width: 100wh;
  height: 90vh;
  color: #fff;
  background-image: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
  background-size: 400% 400%;
  -webkit-animation: Gradient 15s ease infinite;
  -moz-animation: Gradient 15s ease infinite;
  animation: Gradient 15s ease infinite;
}

.fire {
  background-image: linear-gradient(-45deg, #ff0000, #efefef, #ff0000, #efefef);
}

@-webkit-keyframes Gradient {
0% {
    background-position: 0% 50%
}
50% {
    background-position: 100% 50%
}
100% {
    background-position: 0% 50%
}
}

@-moz-keyframes Gradient {
    0% {
    background-position: 0% 50%
}
50% {
    background-position: 100% 50%
}
100% {
    background-position: 0% 50%
}
}

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

<button onclick="setDefault()" tyle="button">Default</buttopn>
<button onclick="clickHandler()" tyle="button">Fire</buttopn>

在不冻结动画的情况下更改 css 线性渐变动画

Changing a css linear gradient animation without freezing the animation

javascript

css

linear-gradients

修复

一种改进的方法