Salah satu kesan visual yang boleh anda gunakan pada elemen pada halaman web ialah memudarkannya masuk dan keluar. Ini boleh dicapai menggunakan kedua-dua CSS dan JavaScript, dengan CSS menyediakan pilihan yang lebih mudah.
Untuk memudarkan elemen menggunakan CSS, gunakan sifat kelegapan. Contohnya:
<code class="css">div { opacity: 0; transition: opacity 1s ease-out; } div:hover { opacity: 1; }</code>
Kod ini menetapkan kelegapan awal elemen kepada 0, menjadikannya tidak kelihatan. Apabila melayang, kelegapan dialihkan kepada 1 dengan lancar dalam tempoh 1 saat.
Jika anda lebih suka penyelesaian JavaScript, anda boleh menggunakan setInterval atau setTimeout untuk menggunakan kesan pudar secara beransur-ansur.
Contoh Fade-Out:
<code class="javascript">function fadeOut(element) { let opacity = 1; const timer = setInterval(() => { if (opacity <= 0) { clearInterval(timer); element.style.display = 'none'; } opacity -= 0.1; element.style.opacity = opacity; }, 10); }
Fungsi ini mengurangkan kelegapan elemen setiap 10 milisaat sehingga mencapai 0, pada ketika itu ia menyembunyikan elemen.
Contoh Fade-In:
<code class="javascript">function fadeIn(element) { let opacity = 0; element.style.display = 'block'; const timer = setInterval(() => { if (opacity >= 1) { clearInterval(timer); } opacity += 0.1; element.style.opacity = opacity; }, 10); }</code>
Fungsi ini secara beransur-ansur meningkatkan kelegapan elemen sehingga mencapai 1, menjadikannya kelihatan sepenuhnya.
Oleh menggunakan teknik ini, anda boleh menggabungkan animasi fade-in dan fade-out dengan berkesan ke dalam tapak web anda untuk meningkatkan pengalaman pengguna.
Atas ialah kandungan terperinci Bagaimanakah saya boleh mencipta kesan fade-in dan fade-out untuk elemen pada halaman web saya menggunakan JavaScript dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!