简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Questions et réponses  >  le corps du texte

Pratique supplémentaire sur les modifications automatiques d'arrière-plan avec JavaScript et CSS

<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粉875565683P粉875565683405 Il y a quelques jours498

répondre à tous(2)je répondrai

  • P粉081360775

    P粉0813607752023-08-16 15:17:43

    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;
}

    répondre
    0
  • P粉729198207

    P粉7291982072023-08-16 09:38:10

    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;
}

    répondre
    0
  • Annulerrépondre