Rumah  >  Soal Jawab  >  teks badan

Latihan lanjut mengenai perubahan latar belakang automatik dengan JavaScript dan CSS

<p>Dalam soalan saya sebelum ini, dengan bantuan (Jan) saya menyelesaikan masalah perubahan latar belakang automatik. </p> <p>Soalan saya sebelum ini: Perubahan latar belakang automatik menggunakan JavaScript dan CSS</p> <p>Tetapi apabila latar belakang berubah, lompatan dalam warna kelihatan dan saya mahu perubahan warna menjadi lancar dan perlahan. </p> <p><br /></p> <pre class="brush:js;toolbar:false;">var i = 0; function changeBackgroundColor() { var background = document.getElementById("latar belakang"); jika (i % 2 === 0) { background.classList.remove("background-body"); } lain { background.classList.add("background-body"); } i = i + 1; } setInterval(changeBackgroundColor, 3 * 1000);</pre> <pre class="brush:css;toolbar:false;">html,body{ lebar: 100%; limpahan-x: tersembunyi !penting; ketinggian: 100%; limpahan-y: tersembunyi !penting; } #background{ lebar: 100%; ketinggian: 100%; latar belakang: #39c787; imej latar belakang: -webkit-gradient(linear, 15% 0%, 75% 84%, from(#ca83ddc4), to(#7874e3f3), color-stop(70%, #dfa450ab)); peralihan: semua 5s mudah; -webkit-transition: semua 5s mudah; -moz-transition: semua 5s mudah; -o-peralihan: semua 5s mudah; -ms-transition: semua 5s mudah; } .background-body{ latar belakang: #e0922d !penting; imej latar belakang: -webkit-gradient(linear, 15% 0%, 75% 84%, from(#9283ddc4), to(#22ff12d1), color-stop(70%, #c550dfab)) !penting; peralihan: semua 5s mudah; -webkit-transition: semua 5s mudah; -moz-transition: semua 5s mudah; -o-peralihan: semua 5s mudah; -ms-transition: semua 5s mudah; }</pre> <pre class="brush:html;toolbar:false;"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;</skrip> <body id="background"></body></pre> <p><br /></p>
P粉875565683P粉875565683454 hari yang lalu539

membalas semua(2)saya akan balas

  • P粉081360775

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

    Untuk membuat warna latar belakang berubah dengan lancar, anda perlu menambahkan sifat peralihan pada sifat warna latar belakang. Kod berikut boleh mencapai kesan ini:

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

    balas
    0
  • P粉729198207

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

    Gunakan elemen pseudo yang berkedudukan mutlak dengan latar belakang yang berbeza dan kemudian lakukan peralihan perubahan kelegapan di atasnya.

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

    balas
    0
  • Batalbalas