如何製作變色背景？

所以，我知道這可能是一個簡單的問題需要解決，但無論如何...如何製作變色背景？

我試圖讓它在那裏我可以改變網頁的背景顏色，以便象下面這樣：

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

如何製作變色背景？

回答

相關問題