Pratique supplémentaire sur les modifications automatiques d'arrière-plan avec JavaScript et CSS
P粉875565683
2023-08-15 16:52:20
<p>Dans ma question précédente, avec l'aide de (janvier), j'ai résolu le problème du changement automatique d'arrière-plan. </p>
<p>Ma question précédente : Modifications automatiques de l'arrière-plan à l'aide de JavaScript et CSS</p>
<p>Mais lorsque l'arrière-plan change, le saut de couleur est visible et je souhaite que le changement de couleur soit transparent et lent. </p>
<p><br /></p>
<pre class="brush:js;toolbar:false;">var i = 0;
fonction changeBackgroundColor() {
var background = document.getElementById("background");
si (je % 2 === 0) {
background.classList.remove("background-body");
} autre {
background.classList.add("background-body");
}
je = je + 1 ;
}
setInterval(changeBackgroundColor, 3 * 1000);</pre>
<pre class="brush:css;toolbar:false;">html,body{
largeur : 100 % ;
overflow-x : caché !important ;
hauteur : 100 % ;
overflow-y : caché !important ;
}
#arrière-plan{
largeur : 100 % ;
hauteur : 100 % ;
arrière-plan : #39c787 ;
image d'arrière-plan : -webkit-gradient (linéaire, 15 % 0 %, 75 % 84 %, de (#ca83ddc4), à (#7874e3f3), color-stop (70 %, #dfa450ab) );
transition : tous les 5 sont faciles ;
-webkit-transition : tous les 5 sont faciles ;
-moz-transition : tous les 5 sont faciles ;
-o-transition : tous les 5 sont faciles ;
-ms-transition : toutes les 5 s facilitent ;
}
.fond-corps{
arrière-plan : #e0922d !important ;
image d'arrière-plan : -webkit-gradient(linéaire, 15 % 0 %, 75 % 84 %, de(#9283ddc4), à(#22ff12d1), color-stop(70 %, #c550dfab)) !important ;
transition : tous les 5 sont faciles ;
-webkit-transition : tous les 5 sont faciles ;
-moz-transition : tous les 5 sont faciles ;
-o-transition : tous les 5 sont faciles ;
-ms-transition : toutes les 5 s facilitent ;
}</pré>
<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>
Pour que la couleur d'arrière-plan change en douceur, vous devez ajouter la propriété de transition à la propriété background-color. Le code suivant peut obtenir cet effet :
Utilisez un pseudo-élément positionné de manière absolue avec un arrière-plan différent, puis effectuez une transition de changement d'opacité par-dessus.