Artikel ini akan memberikan:
- Metode 1: Efek Fade-in Menggunakan Properti animasi CSS
- Metode 2: Efek Fade-in Menggunakan Properti Transisi CSS
Metode 1: Efek Fade-in Menggunakan Properti 'animasi' CSS
Untuk mendesain halaman HTML sederhana, tambahkan elemen berikut di atasnya:
- Tambahkan ' ' elemen bersama dengan ' gaya ” atribut. Atribut 'gaya' berisi properti penataan elemen.
- Terapkan “ warna ” di atribut style untuk menentukan warna teks elemen.
- Setelah itu, gunakan “ ” elemen untuk menambahkan beberapa teks atau paragraf sederhana.
Di bawah ini adalah kode HTML:
< h2 gaya = 'warna: rgb(84, 8, 191)' >
Situs Web Tutorial Linuxint
< / h2 >
< p > efek fade-in pada pemuatan halaman < / p >
Halaman HTML berhasil dibuat:
Di bagian CSS, untuk menerapkan efek fade-in pada halaman, tanda “ animasi ” Properti CSS akan digunakan pada “
Elemen gaya 'tubuh'.
tubuh {animasi: fadeInPage kemudahan 3s;
animasi-iterasi-hitungan: satu ;
}
“
” diterapkan dengan properti CSS berikut:- “ animasi ” adalah properti steno yang menyetel animasi dengan menentukan beberapa nilai. Di sini, nama animasi, fungsi waktu animasi, dan durasi animasi ditentukan.
- “ animasi-iterasi-jumlah ” menentukan berapa kali animasi harus diulang.
Terapkan aturan “@keyframes” pada “animasi”
@keyframes fadeInPage {0 % {
kegelapan: 0 ;
}
100 % {
kegelapan: satu ;
}
}
Untuk mendefinisikan “ @keyframe aturan untuk animasi, sebutkan nama animasi setelah kata kunci @keyframes. Ubah perilaku animasi sebagai berikut:
- Pada ' 0% ' animasi, ' kegelapan ” properti diberi nilai 0. Artinya saat animasi dimulai, gambarnya transparan.
- Pada ' 100% ” animasi, opacity diatur ke “ satu ”, yang mengacu pada warna solid.
Keluaran
Mari beralih ke metode kedua untuk menerapkan efek Fade-in pada pemuatan halaman.
Metode 2: Efek Fade-in Menggunakan Properti 'transisi' CSS
Tambahkan “ memuat ” atribut dalam “
Dalam contoh ini, CSS “ transisi ” properti digunakan untuk menambahkan efek fade-in:
tubuh {kegelapan: 0 ;
transisi: opacity 6s;
}
Berikut adalah penjelasan dari sifat-sifat yang disebutkan di atas:
- “ kegelapan ” properti mendefinisikan transparansi elemen.
- Menggunakan CSS “ transisi ”, secara bertahap mengubah nilai properti selama waktu yang ditentukan.
Keluaran
Kami telah mengajari Anda metode menggunakan CSS untuk efek fade-in pada pemuatan halaman.
Kesimpulan
Beberapa properti CSS dapat digunakan untuk menerapkan efek fade-in pada elemen HTML. Lebih khusus lagi, “ animasi ”, “ kegelapan ', dan ' transisi ” properti dapat digunakan untuk menentukan efek animasi pada halaman atau elemen. Animasi disesuaikan dengan menggunakan tombol “ @keyframe ' aturan. Artikel ini telah menjelaskan metode untuk menambahkan efek fade-in pada pemuatan halaman menggunakan CSS.