Dalam manual ini, kita akan mempelajari prosedur untuk menunjukkan dan menyembunyikan div dengan ' peralihan ” harta CSS.
Bagaimana untuk Menunjukkan dan Menyembunyikan Div dengan Peralihan dalam CSS?
CSS ' peralihan ” hartanah memudahkan untuk menukar nilai hartanah berdasarkan tempoh tertentu. Ia boleh menjadi unsur terapung atau aktif, bergantung pada keadaannya. Selain itu, sifat peralihan CSS digunakan untuk menunjukkan dan menyembunyikan div dalam HTML.
Sekarang, mari kita beralih kepada sintaks sifat peralihan.
Sintaks
Terdapat dua perkara yang anda perlu tentukan semasa membuat kesan peralihan:
Pada asasnya, ' peralihan ” ialah harta ringkas yang terdiri daripada empat sifat lain, yang diberikan di bawah:
peralihan : tempoh peralihan-harta-peralihanperalihan-masa-fungsi peralihan-kelewatan
Berikut adalah huraian sifat yang disebutkan:
- harta peralihan: Ia digunakan untuk menetapkan peralihan kepada mana-mana harta CSS. Seperti lebar, tinggi, kelegapan dan banyak lagi.
- tempoh peralihan: Ia digunakan untuk menentukan tempoh peralihan.
- fungsi pemasaan peralihan: Ia digunakan untuk menetapkan kelajuan peralihan.
- kelewatan peralihan: Ia menentukan masa peralihan bermula atau ditangguhkan.
Mari kita ambil contoh di mana kita akan menunjukkan dan menyembunyikan div dengan ' peralihan ” harta CSS. Untuk tujuan ini, pertama, kami mencipta ' div 'dan jenis input' kotak semak ”.
Langkah 1: Buat dan Gaya Div
Dalam teg
HTML
>
Selepas ini, kami akan menggayakan div dengan menggunakan sifat warna latar belakang dan menetapkan warna latar belakang sebagai “ rgb(238, 190, 118) ”. Kami akan menetapkan ketinggian div sebagai ' 150px ' dan laraskan sempadan di sekelilingnya sebagai ' 10px ”, “ rabung ”, dan “ rgb(6, 56, 2) ”. Pada akhirnya, kami akan menentukan saiz fon sebagai ' 50px ”.
CSS
div {warna latar belakang : rgb ( 238 , 190 , 118 ) ;
ketinggian : 150px ;
sempadan : 10px rabung rgb ( 6 , 56 , dua ) ;
Saiz huruf : 50px ;
}
Output kod yang diterangkan di atas diberikan di bawah. Di sini, anda boleh melihat bahawa div dan kotak semak berjaya dibuat:
Sekarang, beralih ke langkah seterusnya di mana kita menyembunyikan dan menunjukkan div menggunakan sifat peralihan.
Langkah 2: Tunjukkan dan Sembunyikan Div Dengan Peralihan
Untuk melakukan ini, kami akan menetapkan kesan peralihan dengan menetapkan ' kelegapan ”, tempohnya sebagai “ 2s ”, dan nilai kelegapan sebagai “ 0 ” dalam kelas div yang kami buat dalam CSS:
peralihan : kelegapan 2s ;kelegapan : 0 ;
Catatan: Kami akan menggunakan peralihan pada ' kelegapan ” harta untuk menetapkan ketelusan unsur. Di sini, kami akan menentukan nilainya sebagai ' 0 ”, yang bermaksud apabila peralihan bermula, div akan disembunyikan selama dua saat.
Selepas menetapkan nilai peralihan, kami akan menggunakan ' input ' untuk mengakses jenis input yang dibuat dalam fail HTML dan menetapkan kelas pseudo elemen input sebagai ' : disemak ”. Kemudian, kami akan mengakses div yang dibuat, dan ' + ” operator akan digunakan untuk mengaitkan kotak semak dengan div. Oleh itu, apabila operasi dilakukan pada kotak semak, penggunaannya akan menjejaskan div. Seterusnya, kami akan menetapkan nilai kelegapan sebagai ' 1 ”:
input : diperiksa + div {kelegapan : 1
}
Catatan: Kami akan menentukan nilai kelegapan sebagai ' 1 ”, yang bermaksud bahawa apabila kotak semak ditanda, div yang dibuat akan ditunjukkan. Selain itu, nyahtandanya untuk menyembunyikan div
Seperti yang anda lihat, div ditunjukkan dan disembunyikan menggunakan ' peralihan ” harta dan “ : disemak 'elemen kelas pseudo:
Kami telah menerangkan kaedah untuk menyembunyikan dan menunjukkan div dengan sifat peralihan dalam CSS.
Kesimpulan
Untuk menunjukkan dan menyembunyikan div, ' peralihan ” harta dan “ : disemak 'elemen kelas pseudo digunakan sedemikian rupa sehingga nilai kelegapan div ditetapkan sebagai ' 0 ”, dan dalam :elemen kelas pseudo yang diperiksa, tetapkan kelegapan sebagai “ 1 ”. Apabila pengguna mengklik pada kotak semak, div akan dipaparkan, dan apabila ia menjadi tidak ditanda, div akan bersembunyi. Dalam manual ini, kami telah menerangkan kaedah untuk menyembunyikan dan menunjukkan div dengan menggunakan sifat peralihan.