Cara Mentransisi CSS 'display' + 'opacity' Properties

Cara Mentransisi Css Display Opacity Properties



Di CSS, transisi mengacu pada metode untuk mengontrol kecepatan elemen yang ditambahkan sambil menerapkan properti CSS di atasnya. Lebih khusus lagi, Anda dapat melakukan berbagai transisi, termasuk transisi halaman, transisi gambar, teks, dan banyak lagi. Anda dapat menentukan perubahan yang akan diterapkan setelah jangka waktu tertentu, sebagai kebalikan dari perubahan properti yang langsung berlaku.

Posting ini menjelaskan metode pengaturan transisi dengan bantuan CSS ' menampilkan ' Dan ' kegelapan ” Properti.

Bagaimana Transisi CSS 'menampilkan' dan 'opacity' Properties?

Untuk mentransisikan CSS “ menampilkan ' Dan ' kegelapan ” properti, pertama, buat wadah div dengan “

” elemen. Kemudian, akses wadah div dan tambahkan gambar latar belakang dengan bantuan tombol “ gambar latar belakang ' Properti. Setelah itu, atur “ transisi ”, “ kegelapan ”, dan properti lain yang diperlukan sesuai pilihan Anda.





Langkah 1: Buat Kontainer 'div'.

Awalnya, buat wadah div dengan bantuan “

” wadah dan tambahkan atribut kelas dengan nama tertentu. Untuk melakukannya, kami telah menetapkan nama kelas sebagai “ barang ”:



= 'barang utama' > >

Langkah 2: Setel Properti 'tampilan'.

Selanjutnya, akses container div dengan menggunakan nama class “ item utama ” dan atur “ menampilkan ' Properti:



.main-item {

menampilkan : memblokir ;

}

Di sini, nilai “ menampilkan Properti ” ditetapkan sebagai “ memblokir ” untuk mengambil semua lebar layar.



Langkah 3: Tambahkan Gambar Latar Belakang

Selanjutnya, terapkan properti CSS berikut pada wadah div yang diakses:

.main-item {

tinggi : 400px ;

lebar : 400px ;

gambar latar belakang : url ( spring-flowers.jpg ) ;

kegelapan : 0,1 ;

transisi : kegelapan 2 detik kemudahan-in-out ;

batas : 30px 50px ;

}

Dalam cuplikan kode yang disebutkan di atas:



  • “ tinggi ' Dan ' lebar ” properti menentukan ukuran elemen yang ditentukan.
  • “ gambar latar belakang ” Properti CSS digunakan untuk menyisipkan gambar dengan bantuan tombol “ url() ” berfungsi di bagian belakang elemen.
  • “ kegelapan ” menentukan tingkat opacity untuk suatu elemen. Tingkat opasitas menunjukkan tingkat transparansi, di mana “ 1 ” digunakan untuk tidak ada transparansi, dan “ 0,5 ' adalah untuk ' lima puluh% ” transparansi.
  • “ transisi ” di CSS memungkinkan pengguna untuk mengubah nilai properti dengan lancar selama durasi tertentu.
  • “ batas ” mendefinisikan ruang di luar batas yang ditentukan di sekitar elemen.

Keluaran

Langkah 4: Terapkan Pemilih Pseudo “:hover”.

Sekarang, akses wadah div di sepanjang “ :arahkan ” pemilih semu yang digunakan untuk memilih elemen saat kita mengarahkan mouse ke atasnya:

.main-item : melayang {

kegelapan : 1 ;

}

Kemudian, atur ' kegelapan ” dari elemen yang dipilih sebagai “ 1 ” untuk menghapus transparansi.

Keluaran

Itu semua tentang menyetel transisi CSS 'display' dan 'opacity' properti.

Kesimpulan

Untuk mengatur properti transisi 'display' dan 'opacity', pertama-tama, buat wadah div dengan menggunakan elemen

. Selanjutnya, akses elemen div dan atur “ menampilkan ' sebagai ' memblokir ”. Setelah itu, terapkan properti CSS lainnya, termasuk “ gambar latar belakang ” untuk menyisipkan gambar ke dalam container, “transition”, “opacity”, dan lain-lain. Posting ini menjelaskan metode untuk mengatur transisi dengan CSS ' menampilkan ' Dan ' kegelapan ” properti.

Lainnya

Kategori

Pesan Populer

Kesalahan runtime JavaScript: '$' tidak ditentukan.

25 Ekstensi GNOME Terbaik

Cara Install Driver/Firmware Jaringan Ethernet dan WiFi Non-Gratis di Debian 12

3 Cara Mudah Menempatkan Dua Div Berdampingan di CSS

Bagaimana Cara Mendapatkan Eksponen Elemen Tensor di PyTorch?

Cara Memperbaiki Kesalahan Pembaruan Windows 0x8024402f di Windows 10/8/7

Di mana menemukan Batubara di Minecraft

Bagaimana Cara Menambahkan Margin Horizontal dan Vertikal di Tailwind?

Cara Mengaktifkan/Menonaktifkan JavaScript di Google Chrome

Cara Instal ke Java di Windows 11

Pertahankan urutan Favorit Internet Explorer saat mentransfer ke PC lain - Winhelponline

Bagaimana Cara Menggunakan Img2Img Difusi Stabil dalam Difusi Mudah?

Bagaimana Prosedur Update Windows 7 ke Windows 10

Bagaimana Memulihkan Dokumen Word yang Belum Tersimpan di Windows 10?

Contoh Irisan Sortir Golang

Docker Halo Dunia

Permintaan untuk Versi Oracle

Cara Install dan Konfigurasi Dropbear di Ubuntu

Bagaimana Cara Mengatur dan Menggunakan Drive RAM di Windows?

Cara Menggunakan Pernyataan Try Catch di C