修复

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.

您可以检查此答案以了解其简化之处，并在需要不同动画的情况下提供更多详细信息：https://stackoverflow.com/a/51734530/8620333

Answer 2

首先，由于您的“ a”标签用作按钮而不是锚，因此应使用button元素。其次，使用所需的背景色创建一个类，并使用onclick事件触发它。（顺便说一下，车身宽度应该在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，并且background属性是同时设置background-image和background-position的简写。您通过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线性渐变动画而不冻结动画

3 个答案:

修复

一种改进的方法