Pratique supplémentaire sur les modifications automatiques d'arrière-plan avec JavaScript et CSS
P粉875565683
P粉875565683 2023-08-15 16:52:20
0
2
537
<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>
P粉875565683
P粉875565683

répondre à tous(2)
P粉081360775

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 :

#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;
}
P粉729198207

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.

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;
}
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!