suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Weitere Übung zu automatischen Hintergrundänderungen mit JavaScript und CSS

<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>
P粉875565683P粉875565683456 Tage vor544

Antworte allen(2)Ich werde antworten

  • P粉081360775

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

    要使背景颜色平滑变化，您需要将过渡属性添加到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;
}

    Antwort
    0
  • P粉729198207

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

    使用一个绝对定位的伪元素，具有不同的背景，然后在其上进行不透明度的变化过渡。

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

    Antwort
    0
  • StornierenAntwort