背景色を変更するにはどうすればよいですか？

だから、私は私は以下のような順序で、Webページの背景色を変更することができ、それを作るしようとしている、これは解決する簡単な問題ではなく、とにかく...背景色を変更するにはどうすればよいですか？

ことを知っている：

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

hereをクリックすると、私のウェブページのためにやっていることをしているウェブページのデモが表示されます。

私はbody要素の上にいくつかの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（）関数は、色を簡単に変更するための関数です。誰もがこれをWebページに実装する方法を知っていますか？ありがとう！

出典

2017-02-03 Ben Stafford

この効果を得るには、JavaScriptを使用する必要はありません。 CSSアニメーションを使用すると、独自のファンキーな背景を作成できます。

.backgroundは、すべての種類の色をループ（およびフェード）する名前（この場合はbg-animation）を持つanimationという名前のプロパティを取得します。アニメーション自体は@keyframesの範囲内で指定します。アニメーションの時間は10秒、つまり10sに設定され、何でもかまいません。

続きを読む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を使った私のアプローチです。 Setintervalは、javascriptを使用するときに行く方法です。 – mttprvst13

これは本当に奇妙です。マウスを動かすと、出力は非常に滑らかな効果がありますが、マウスが静止しているときはフェードがなく、滑らかではありません。 – CodingNinja

背景色を変更するにはどうすればよいですか？

答えて

関連する問題