CSS中的动画渐变背景

我试图在下面使用CSS将这个效果插入WordPress站点的背景中，但似乎无法理解

---

谢谢你抽出时间

我做过一次这个效果，但不是渐变效果，只是纯色效果。我想你可以用背景图像编辑它：线性渐变（顶部、顶部、底部）和过渡时间：

进行关键帧转换并在对象中调用它。在本例中，HTML已满：

    @-webkit-keyframes moveColor {
    from {
    background-color: #43536E;
  }
  10% {
    background-color: #591553;
  }
  20% {
    background-color: #00d5d6;
  }
  30% {  
    background-color: #8C0303;
  }
  40% {
    background-color: #D6873A;
  }
  50% {
    background-color: #3D4047;
  }
  60% {
    background-color: #ffa73d;
  }
  70% {
    background-color: #0089B3;
  }
  80% {
    background-color: #9FB309;
  }
  90% {
    background-color: #3a3a3a;
  }
  100% {
    background-color: #5B4D41;
  }
  to {
    background-color: #43536E;
  }
}
@-moz-keyframes moveColor {
  from {
    background-color: #43536E;
  }
  10% {
    background-color: #591553;
  }
  20% {
    background-color: #00d5d6;
  }
  30% {
    background-color: #8C0303;
  }
  40% {
    background-color: #D6873A;
  }
  50% {
    background-color: #3D4047;
  }
  60% {
    background-color: #ffa73d;
  }
  70% {
    background-color: #0089B3;
  }
  80% {
    background-color: #9FB309;
  }
  90% {
    background-color: #3a3a3a;
  }
  100% {
    background-color: #5B4D41;
  }
  to {
    background-color: #43536E;
  }
}
@-ms-keyframes moveColor {
  from {
    background-color: #43536E;
  }
  10% {
    background-color: #591553;
  }
  20% {
    background-color: #00d5d6;
  }
  30% {
    background-color: #8C0303;
  }
  40% {
    background-color: #D6873A;
  }
  50% {
    background-color: #3D4047;
  }
  60% {
    background-color: #ffa73d;
  }
  70% {
    background-color: #0089B3;
  }
  80% {
    background-color: #9FB309;
  }
  90% {
    background-color: #3a3a3a;
  }
  100% {
    background-color: #5B4D41;
  }
  to {
    background-color: #43536E;
  }
}
@-o-keyframes moveColor {
  from {
    background-color: #43536E;
  }
  10% {
    background-color: #591553;
  }
  20% {
    background-color: #00d5d6;
  }
  30% {
    background-color: #8C0303;
  }
  40% {
    background-color: #D6873A;
  }
  50% {
    background-color: #3D4047;
  }
  60% {
    background-color: #ffa73d;
  }
  70% {
    background-color: #0089B3;
  }
  80% {
    background-color: #9FB309;
  }
  90% {
    background-color: #3a3a3a;
  }
  100% {
    background-color: #5B4D41;
  }
  to {
    background-color: #43536E;
  }
}
@keyframes moveColor {
  from {
    background-color: #43536E;
  }
  10% {
    background-color: #591553;
  }
  20% {
    background-color: #00d5d6;
  }
  30% {
    background-color: #8C0303;
  }
  40% {
    background-color: #D6873A;
  }
  50% {
    background-color: #3D4047;
  }
  60% {
    background-color: #ffa73d;
  }
  70% {
    background-color: #0089B3;
  }
  80% {
    background-color: #9FB309;
  }
  90% {
    background-color: #3a3a3a;
  }
  100% {
    background-color: #5B4D41;
  }
  to {
    background-color: #43536E;
  }
} 
html {
   -webkit-animation: moveColor 50s ease infinite;
  -khtml-animation: moveColor 50s ease infinite;
  -moz-animation: moveColor 50s ease infinite;
  -ms-animation: moveColor 50s ease infinite;
  -o-animation: moveColor 50s ease infinite;
  animation: moveColor 50s ease infinite;
  -webkit-transition: 0.3s;
  -khtml-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

---

我希望它对你有用。

在这里，我为你做了这个

body {
  background: linear-gradient( 
    45deg,
    violet,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );

  background-size: 1000%;

  animation: move_bg 500s linear 0s infinite;
}

@keyframes move_bg {
  from {background-position: 0}
  to {background-position: 1000%}
}

---

对不起，伙计。。。我们不是为您编码所有的代码都在codepen上，这将非常简单，可以放入Wordpress模板中。

body {
  background: linear-gradient( 
    45deg,
    violet,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );

  background-size: 1000%;

  animation: move_bg 500s linear 0s infinite;
}

@keyframes move_bg {
  from {background-position: 0}
  to {background-position: 1000%}
}