Artikel ini akan menyediakan:
- Kaedah 1: Kesan Fade-in Menggunakan Animasi CSS Property
- Kaedah 2: Kesan Fade-in Menggunakan Harta Peralihan CSS
Kaedah 1: Kesan Fade-in Menggunakan Harta 'animasi' CSS
Untuk mereka bentuk halaman HTML yang mudah, tambahkan elemen berikut padanya:
- Tambahkan ' elemen ” bersama dengan “ gaya ” atribut. Atribut 'gaya' mengandungi sifat penggayaan elemen.
- Guna ' warna ” harta dalam atribut gaya untuk menentukan warna teks elemen.
- Selepas itu, gunakan ' ” elemen untuk menambah beberapa teks atau perenggan ringkas.
Di bawah ialah kod HTML:
< h2 gaya = 'warna: rgb(84, 8, 191)' >
Laman Web Tutorial Linuxhint
< / h2 >
< hlm > kesan pudar pada pemuatan halaman < / hlm >
Halaman HTML berjaya dibuat:
Dalam bahagian CSS, untuk menggunakan kesan fade-in pada halaman, “ animasi ' Sifat CSS akan digunakan pada '
Elemen 'badan' gaya
badan {animasi: fadeInPage memudahkan 3s;
kiraan lelaran animasi: satu ;
}
'
' digunakan dengan sifat CSS berikut:- “ animasi ” ialah sifat trengkas yang menetapkan animasi dengan menentukan berbilang nilai. Di sini, nama animasi, fungsi pemasaan animasi dan tempoh animasi ditakrifkan.
- “ kiraan lelaran animasi ” mentakrifkan berapa kali animasi harus berulang.
Gunakan peraturan '@keyframes' pada 'animasi'
@keyframes fadeInPage {0 % {
kelegapan: 0 ;
}
100 % {
kelegapan: satu ;
}
}
Untuk menentukan ' @keyframes ” peraturan untuk animasi, sebutkan nama animasi selepas kata kunci @keyframes. Ubah suai tingkah laku animasi seperti berikut:
- Pada ' 0% animasi, yang kelegapan ” harta diberikan nilai 0. Ini bermakna apabila animasi bermula, imej adalah telus.
- Pada ' 100% animasi, kelegapan ditetapkan kepada ' satu ”, yang merujuk kepada warna pepejal.
Pengeluaran
Mari kita teruskan ke arah kaedah kedua untuk menggunakan kesan Fade-in pada pemuatan halaman.
Kaedah 2: Kesan Fade-in Menggunakan Harta 'peralihan' CSS
Tambah ' memuatkan atribut ' dalam '
Dalam contoh ini, CSS ' peralihan ” harta digunakan untuk menambah kesan pudar:
badan {kelegapan: 0 ;
peralihan: kelegapan 6s;
}
Berikut adalah penjelasan sifat-sifat yang dinyatakan di atas:
- “ kelegapan ” harta mentakrifkan ketelusan unsur.
- Menggunakan CSS ' peralihan ”, menukar nilai sifat secara beransur-ansur dalam masa tertentu.
Pengeluaran
Kami telah mengajar anda kaedah untuk menggunakan CSS untuk kesan fade-in pada pemuatan halaman.
Kesimpulan
Beberapa sifat CSS boleh digunakan untuk menggunakan kesan fade-in pada elemen HTML. Lebih khusus lagi, ' animasi ”, “ kelegapan ”, dan “ peralihan sifat ” boleh digunakan untuk menentukan kesan animasi pada halaman atau elemen. Animasi dilaraskan dengan menggunakan “ @keyframe ” peraturan. Artikel ini telah menerangkan kaedah untuk menambah kesan fade-in pada pemuatan halaman menggunakan CSS.