如何制作变色背景？

所以，我知道这可能是一个简单的问题需要解决，但无论如何...如何制作变色背景？

我试图让它在那里我可以改变网页的背景颜色，以便象下面这样：

red > yellow > green > blue > purple > pink > brown > red

点击here的网页演示，做我想为我的网页做。

我想我可以在主体元素上使用一些JavaScript：

<html> 
 
    <body id="body" bgcolor="#FFFFFF"> 
 
     <script> 
 
      var body = document.getElementById('body'); /* Get 
 
      the element with the id of 'body' */ 
 
       
 
      /* I need some javascript to make the 'hex' 
 
      variable change accordingly, then call the setColor() with 
 
      the parameter as a string for the hex code to change the          
 
      background color */ 
 
       
 
      function setColor(hex) { 
 
       body.setAttribute("bgcolor", hex); /* Set the 
 
       attribute bgcolor to the counter variable */ 
 
      } 
 
     </script> 
 
    </body> 
 
</html>

我只需要让它在那里的顺序六角变量的变化像我上面所述。我需要一个for循环，一个while循环或一些循环来重复更改背景颜色的过程。 setColor（）函数可以轻松改变颜色。有谁知道如何将这个实现到一个网页？谢谢！

来源

2017-02-03 Ben Stafford

您不需要使用JavaScript来实现此效果。使用CSS动画，您可以创建自己的时髦背景。

.background获取一个名为动画的属性（在本例中为bg-animation），该属性通过所有种类的颜色循环（并淡入）。您在@keyframes中指定动画本身。动画时间设置为10秒，或者10s，可以是任何东西。

查看更多about animationat MDN。

.background { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    animation: bg-animation 10s infinite; 
 
} 
 

 
@-webkit-keyframes bg-animation { 
 
    0% { 
 
    background-color: red; 
 
    } 
 
    15% { 
 
    background-color: yellow; 
 
    } 
 
    30% { 
 
    background-color: green; 
 
    } 
 
    45% { 
 
    background-color: blue; 
 
    } 
 
    60% { 
 
    background-color: purple; 
 
    } 
 
    75% { 
 
    background-color: pink; 
 
    } 
 
    90% { 
 
    background-color: brown; 
 
    } 
 
    100% { 
 
    background-color: red; 
 
    } 
 
} 
 

 
@keyframes bg-animation { 
 
    0% { 
 
    background-color: red; 
 
    } 
 
    15% { 
 
    background-color: yellow; 
 
    } 
 
    30% { 
 
    background-color: green; 
 
    } 
 
    45% { 
 
    background-color: blue; 
 
    } 
 
    60% { 
 
    background-color: purple; 
 
    } 
 
    75% { 
 
    background-color: pink; 
 
    } 
 
    90% { 
 
    background-color: brown; 
 
    } 
 
    100% { 
 
    background-color: red; 
 
    } 
 
}

<div class="background"></div>

来源

2017-02-03 20:19:35 Roy

这种方法是有点长写的，但它的作品！谢谢！ –

@BenStafford您可以使用Sass函数或Mixin来简化它。 – Roy

我从来没有见过这样的催眠输出在这个网站％ - ） – CodingNinja

setInterval使用方法，随机生成颜色回调内和更新背景。您可以在使用CSS transition属性更改颜色时提供转场。颜色代码可以在Math.random,Math.floor和Number#toString方法的帮助下随机生成。

如果您想在颜色代码数组之间切换，请使用带有计数器变量的数组。

setInterval(function() { 
 
    document.body.style.backgroundColor = '#' + Math.floor(Math.random() * 16777215).toString(16); 
 
}, 2000)

body { 
 
    background:red; 
 
    -webkit-transition: background-color 2000ms linear; 
 
    -moz-transition: background-color 2000ms linear; 
 
    -o-transition: background-color 2000ms linear; 
 
    -ms-transition: background-color 2000ms linear; 
 
    transition: background-color 2000ms linear; 
 
}

来源

2017-02-03 20:20:48

这将是我的方法，使用JavaScript。当使用javascript时，Setinterval是要走的路。 – mttprvst13

这真的很奇怪。当我移动鼠标时，输出效果非常平滑，但是当鼠标静止时，没有褪色，而且非常光滑。 – CodingNinja

如何制作变色背景？

回答

相关问题