JavaScript と CSS を使用した背景の自動変更についてさらに練習します。
P粉875565683
2023-08-15 16:52:20
<p>前の質問で、(Jan) の助けを借りて、背景の自動変更の問題を解決しました。 </p>
<p>前の質問: JavaScript と CSS を使用した背景の自動変更</p>
<p>しかし、背景が変化すると色の変化が目に見えるので、色の変化をシームレスかつゆっくりとさせたいと考えています。 </p>
<p><br /></p>
<pre class="brush:js;toolbar:false;">var i = 0;
関数changeBackgroundColor() {
var 背景 = document.getElementById("背景");
if (i % 2 === 0) {
背景.classList.remove("背景本体");
} それ以外 {
背景.classList.add("背景本体");
}
i = i 1;
}
setInterval(changeBackgroundColor, 3 * 1000);</pre>
<pre class="brush:css;toolbar:false;">html,body{
幅: 100%;
オーバーフロー-x: 非表示!重要;
高さ: 100%;
オーバーフロー y: 非表示 !重要;
}
＃背景{
幅: 100%;
高さ: 100%;
背景: #39c787;
背景画像: -webkit-gradient(linear, 15% 0%, 75% 84%, from(#ca83ddc4), to(#7874e3f3), color-stop(70%, #dfa450ab));
トランジション: すべての 5 秒が簡単になります。
-webkit-transition: すべての 5 を簡単にします。
-moz-transition: すべての 5 秒が簡単になります。
-o-transition: すべての 5 を緩和します。
-ms-transition: すべての 5 秒の緩和。
}
.背景ボディ{
背景: #e0922d !重要;
背景画像: -webkit-gradient(linear, 15% 0%, 75% 84%, from(#9283ddc4), to(#22ff12d1), color-stop(70%, #c550dfab)) !重要;
トランジション: すべての 5 秒が簡単になります。
-webkit-transition: すべての 5 を簡単にします。
-moz-transition: すべての 5 秒が簡単になります。
-o-transition: すべての 5 を緩和します。
-ms-transition: すべての 5 秒の緩和。
}</pre>
<pre class="brush:html;toolbar:false;"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;</スクリプト>
<body id="background"></body></pre>
<p><br /></p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
背景色を滑らかに変化させるには、background-color 属性にtransition 属性を追加する必要があります。次のコードでこの効果を実現できます:
リーリー異なる背景を持つ絶対配置の疑似要素を使用し、その上に不透明度変更トランジションを作成します。