Question

我有一个具有背景渐变的div，其值使用javascript动态设置。有时，我需要更改渐变值（可以是颜色或颜色停止位置）。我想在不使用javascript的情况下为这些更改设置动画（不要误解我，我使用javascript设置渐变valeus，但我想使用CSS3为thise设置动画）。我尝试设置一个transition属性，就像我用CSS做的那样。这是一个MWE：

＆＃13;

function getPercent() {
  return Math.random() * 100;
}
setInterval(() => {
  const per = getPercent();
  document.getElementById('foo').style.background =
    `linear-gradient(to right, #aebcbf 0%,#aebcbf ${per}%,#0a0e0a ${per}%,#0a0e0a 100%`
}, 1000)

＆＃13;

.container {
  transition: all 1s ease;
  background: linear-gradient(to right, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%);
  width: 150px;
  height: 10px;
}

＆＃13;

<div class="container" id="foo"></div>

＆＃13;

Answer 1

希望这很有用

background: linear-gradient(269deg, #ffffff, #ff0000);
background-size: 400% 400%;
-webkit-animation: AnimationName 23s ease infinite;
-moz-animation: AnimationName 23s ease infinite;
-o-animation: AnimationName 23s ease infinite;
animation: AnimationName 23s ease infinite;
@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

参考：https://www.gradient-animator.com/

有关CSS转换的更多信息，请查看此

https://css-tricks.com/almanac/properties/t/transition/

Answer 2

不幸的是background-image不可动画（更多info about background-image）。因此，动画CSS渐变是一个问题。

要使用纯CSS解决此问题，您可以创建包含新渐变的:before。如果要显示新渐变，请将其opacity: 0并更改为opacity: 1。

最终我们可以执行以下操作：

＆＃13;

.container{
  width: 150px;
  height: 10px;
  background: linear-gradient(to right, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%);
  position: relative;
  z-index: 100;
}
.container:before{
  background: linear-gradient(to right, #aebcbf 0%, #6e7774 10%, #0a0e0a 51%, #0a0809 100%);
  content: '';    
  display: block;
  height: 100%;
  position: absolute;
  top: 0; 
  left: 0;
  opacity: 0;
  width: 100%;
  z-index: -100;
  transition: opacity 0.45s;
}
.container:hover:before {
  opacity: 1;
}

＆＃13;

<div class="container" id="foo"></div>

＆＃13;

修改

如果要使渐变动态化，请使用一个变量来跟踪您最后更改的元素，例如：

var swapElement = 0; function getPercent() { return Math.random() * 100; } setInterval(() => { const per = getPercent(); if(swapElement == 0){ //change gradient of :before //set opacity to 1 swapElement = 1; } else { document.getElementById('foo').style.background = `linear-gradient(to right, #aebcbf 0%,#aebcbf ${per}%,#0a0e0a ${per}%,#0a0e0a 100%` }, 1000); //set opacity :before to 0 swapElement = 0; }

Javascript使用CSS3过渡动画样式更改

2 个答案: