Langkah 2: Tambahkan Tajuk

Selanjutnya, masukkan heading dengan menggunakan “

' ke '

” tag. Contohnya, '

” menambahkan tajuk.

Langkah 3: Tambahkan Data ke Daftar

Untuk memasukkan data dalam bentuk daftar, gunakan tombol “ ” tag:

---

---

< div kelas = 'Hewan Peliharaan' >

< h1 > Daftar hewan peliharaan < / h1 >

< itu > Induk ayam < / itu >

< itu > Bebek < / itu >

< itu > Anjing < / itu >

< itu > Kucing < / itu >

< itu > kelinci < / itu >

< / div >

Output dari kode yang disebutkan di atas adalah sebagai berikut:

Sekarang, lanjutkan ke bagian CSS untuk menata daftar.

Langkah 4: Style Elemen “.pet-animal”.

Akses “

” elemen dengan bantuan kelas yang ditugaskan “ .Hewan Peliharaan ” dan terapkan properti yang terdaftar:

.Hewan Peliharaan {

berbatasan : 2px burik rgb ( 230 , limabelas , limabelas ) ;

batas : 50px ;

warna latar belakang : rgb ( 252 , 239 , 169 ) ;

}

Di Sini:

• “ berbatasan ” properti digunakan untuk menentukan batas di sekitar elemen.
• “ batas ” mendefinisikan ruang di sekitar batas elemen.
• “ warna latar belakang ” mengalokasikan warna di bagian belakang elemen.

Gambar yang dihasilkan menunjukkan output dari kode di atas:

Langkah 5: Daftar Penambahan Gaya “li”

Sekarang, akses daftar “ div “wadah yang memiliki kelas” Hewan Peliharaan ' menggunakan ' .pet-hewan > li ” dan terapkan properti yang disebutkan di bawah ini:

.Hewan Peliharaan > itu {

visibilitas : tersembunyi ;

kegelapan : 0,2 ;

transisi : visibilitas 0 detik , kegelapan 0,5 detik linier ;

}

Di Sini:

• “ visibilitas ” CSS digunakan untuk mengatur visibilitas elemen tanpa mengubah tata letak dokumen, seperti tersembunyi atau terlihat.
• “ kegelapan ” menentukan transparansi suatu elemen.
• “ transisi ” memungkinkan pengguna mengubah nilai properti dengan lancar selama durasi tertentu:

Langkah 6: Terapkan 'arahkan' Kelas Pseudo

Sekarang, terapkan ' melayang ” properti dalam daftar:

.Hewan Peliharaan : melayang > itu {

visibilitas : bisa dilihat ;

kegelapan : satu ;

}

“ :arahkan ” CSS adalah kelas semu yang membuat perubahan pada waktu berjalan ketika penunjuk mouse digerakkan ke atas elemen. Membuat daftar terlihat menggunakan “ visibilitas ” dan atur transparansi menggunakan “ kegelapan ” properti CSS ke daftar di hover:

Dapat diamati bahwa kami telah berhasil menerapkan transisi pada “ menampilkan ' Properti.

Kesimpulan

Transisi CSS tidak dapat langsung diterapkan ke “ menampilkan ' Properti. Namun, itu bisa diterapkan dengan cara alternatif. Untuk melakukannya, tambahkan tag daftar pada dokumen HTML, akses daftar dengan nama tag, dan terapkan “ transisi ”, “ kegelapan ', dan ' visibilitas ” Properti CSS ada dalam daftar. Kemudian, gunakan ' : melayang ” pseudo-class dan tetapkan nilai visibility sebagai “ bisa dilihat ”. Posting ini telah menjelaskan bagaimana transisi diterapkan ke properti tampilan CSS.