Weitere Übung zu automatischen Hintergrundänderungen mit JavaScript und CSS
P粉875565683
2023-08-15 16:52:20
<p>In meiner vorherigen Frage habe ich mit Hilfe von (Jan) das Problem der automatischen Hintergrundänderung gelöst. </p>
<p>Meine vorherige Frage: Automatische Hintergrundänderungen mit JavaScript und CSS</p>
<p>Aber wenn sich der Hintergrund ändert, ist der Farbsprung sichtbar, und ich möchte, dass der Farbwechsel nahtlos und langsam erfolgt. </p>
<p><br /></p>
<pre class="brush:js;toolbar:false;">var i = 0;
Funktion changeBackgroundColor() {
var Hintergrund = document.getElementById("Hintergrund");
if (i % 2 === 0) {
background.classList.remove("background-body");
} anders {
background.classList.add("background-body");
}
ich = ich + 1;
}
setInterval(changeBackgroundColor, 3 * 1000);</pre>
<pre class="brush:css;toolbar:false;">html,body{
Breite: 100 %;
overflow-x: versteckt !important;
Höhe: 100 %;
overflow-y: versteckt !important;
}
#Hintergrund{
Breite: 100 %;
Höhe: 100 %;
Hintergrund: #39c787;
Hintergrundbild: -webkit-gradient(linear, 15 % 0 %, 75 % 84 %, from(#ca83ddc4), to(#7874e3f3), color-stop(70 %, #dfa450ab));
Übergang: alle 5er locker;
-webkit-transition: alle 5s einfach;
-moz-transition: alle 5er erleichtern;
-o-Übergang: alle 5er erleichtern;
-ms-transition: alle 5 Sekunden erleichtern;
}
.background-body{
Hintergrund: #e0922d !important;
Hintergrundbild: -webkit-gradient(linear, 15 % 0 %, 75 % 84 %, from(#9283ddc4), to(#22ff12d1), color-stop(70 %, #c550dfab)) !important;
Übergang: alle 5er locker;
-webkit-transition: alle 5s einfach;
-moz-transition: alle 5er erleichtern;
-o-Übergang: alle 5er erleichtern;
-ms-transition: alle 5 Sekunden erleichtern;
}</pre>
<pre class="brush:html;toolbar:false;"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;</script>
<body id="background"></body></pre>
<p><br /></p>
要使背景颜色平滑变化,您需要将过渡属性添加到background-color属性中。以下代码可以实现这一效果:
使用一个绝对定位的伪元素,具有不同的背景,然后在其上进行不透明度的变化过渡。