Latihan lanjut mengenai perubahan latar belakang automatik dengan JavaScript dan CSS

Question

Dalam soalan saya sebelum ini, dengan bantuan (Jan) saya menyelesaikan masalah perubahan latar belakang automatik. Soalan saya sebelum ini: Melaksanakan perubahan latar belakang automatik menggunakan JavaScript dan CSS tetapi apabila latar belakang berubah, lompatan warna kelihatan dan saya mahu perubahan warna berlaku dengan lancar dan perlahan. vari=0;functionchangeBackgroundColor(){varbackground=document.getElementById("background&quo

P粉081360775 · Answer

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

P粉729198207 · Answer

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

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket