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;
function changeBackgroundColor() {
var background = document.getElementById("background");
if (i % 2 === 0) {
background.classList.remove("background-body");
} else {
background.classList.add("background-body");
}
i = i 1;
}
setInterval(changeBackgroundColor, 3 * 1000);</pre>
<pre class="brush:css;toolbar:false;">html,body{
width: 100%;
overflow-x: hidden !important;
height: 100%;
overflow-y: hidden !important;
}
#background{
width: 100%;
height: 100%;
background: #39c787;
background-image: -webkit-gradient(linear, 15% 0%, 75% 84%, from(#ca83ddc4), to(#7874e3f3), color-stop(70%, #dfa450ab));
transition: all 5s ease;
-webkit-transition: all 5s ease;
-moz-transition: all 5s ease;
-o-transition: all 5s ease;
-ms-transition: all 5s ease;
}
.background-body{
background: #e0922d !important;
background-image: -webkit-gradient(linear, 15% 0%, 75% 84%, from(#9283ddc4), to(#22ff12d1), color-stop(70%, #c550dfab)) !important;
transition: all 5s ease;
-webkit-transition: all 5s ease;
-moz-transition: all 5s ease;
-o-transition: all 5s ease;
-ms-transition: all 5s ease;
}</pre>
<pre class="brush:html;toolbar:false;"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.3.1/jquery.min.js"> ;</script>
<body id="background"></body></pre>
<p><br /></p>
要讓背景顏色平滑變化，您需要將過渡屬性加入到background-color屬性中。以下程式碼可以實現這一效果：
#background{ width: 100%; height: 100%; background: #39c787; background-image: -webkit-gradient(linear, 15% 0%, 75% 84%, from(#ca83ddc4), to(#7874e3f3), color-stop(70%, #dfa450ab)); transition: background-color 5s ease; -webkit-transition: background-color 5s ease; -moz-transition: background-color 5s ease; -o-transition: background-color 5s ease; -ms-transition: background-color 5s ease; } .background-body{ background: #e0922d !important; background-image: -webkit-gradient(linear, 15% 0%, 75% 84%, from(#9283ddc4), to(#22ff12d1), color-stop(70%, #c550dfab)) !important; transition: background-color 5s ease; -webkit-transition: background-color 5s ease; -moz-transition: background-color 5s ease; -o-transition: background-color 5s ease; -ms-transition: background-color 5s ease; }使用一個絕對定位的偽元素，具有不同的背景，然後在其上進行不透明度的變化過渡。
function changeBackgroundColor() { document.body.classList.toggle("alt-background") setTimeout(changeBackgroundColor, 4000) } changeBackgroundColor()html, body { width: 100%; height: 100%; } body { position: relative; margin: 0; background-image: linear-gradient(135deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); } body::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; background-image: linear-gradient(135deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); opacity: 0; transition: opacity 2s ease-in-out; } body.alt-background::before { opacity: 1; }