Question

我试图在下面使用CSS来插入WordPress网站的背景，但似乎无法解决这个问题。

body{
     background-color: #000000;
   padding: 0px;
   margin: 0px;
 }

#gradient
{
  width: 100%;
  height: 800px;
  padding: 0px;
  margin: 0px;
}

感谢您的时间！

Answer 1

我做了一次这个效果，但没有渐变，只有纯色。我想你可以用background-image编辑它：linear-gradient（top，＃topcolor，＃bottomomcolor）和转换时间：

使关键帧转换并在对象中调用它。在这种情况下填写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;
}

http://codepen.io/ycisne/pen/Gqalu

我希望它适合你。

Answer 2

在这里，我为你做了这个。

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%}
}

Demo

CSS中的动画渐变背景

2 个答案: