Rumah > Soal Jawab > teks badan
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; }
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; }