Bu kılavuzda, div'i “ ile gösterme ve gizleme prosedürünü öğreneceğiz. geçiş ” CSS'nin özelliği.
CSS'de Geçişli Div Nasıl Gösterilir ve Gizlenir?
CSS'yi ' geçiş ” özelliği, mülkün değerini belirli bir döneme göre değiştirmeyi kolaylaştırır. Durumuna bağlı olarak kayan veya aktif bir eleman olabilir. Ayrıca, CSS'nin geçiş özelliği, div'i HTML'de göstermek ve gizlemek için kullanılır.
Şimdi geçiş özelliğinin sözdizimine geçelim.
Sözdizimi
Geçiş efekti oluştururken belirtmeniz gereken iki şey vardır:
Temel olarak, ' geçiş ”, aşağıda verilen diğer dört özellikten oluşan bir kestirme özelliktir:
geçiş : geçiş-özellik geçiş-süresigeçiş-zamanlama-fonksiyonu geçiş-gecikmesi
Bahsedilen özelliklerin açıklaması aşağıdadır:
- geçiş özelliği: Herhangi bir CSS özelliğine geçişi ayarlamak için kullanılır. Genişlik, yükseklik, opaklık ve daha fazlası gibi.
- geçiş süresi: Geçişin süresini belirtmek için kullanılır.
- geçiş-zamanlama-fonksiyonu: Geçişin hızını ayarlamak için kullanılır.
- geçiş gecikmesi: Geçişin başladığı veya geciktiği zamanı belirtir.
Şimdi div'i “ ile gösterip gizleyeceğimiz bir örnek alalım. geçiş ” CSS'nin özelliği. Bu amaçla öncelikle bir “ div ” ve bir giriş türü “ onay kutusu ”.
1. Adım: Div Oluşturun ve Stil Oluşturun
HTML
Bundan sonra, arka plan rengi özelliğini kullanarak div'i şekillendireceğiz ve arka planın rengini “ olarak ayarlayacağız. rgb(238, 190, 118) ”. Divin yüksekliğini “olarak ayarlayacağız. 150 piksel ” ve etrafındaki kenarlığı “ olarak ayarlayın. 10 piksel ”, “ çıkıntı ', ve ' rgb(6, 56, 2) ”. Sonunda yazı tipi boyutunu “ olarak belirleyeceğiz. 50 piksel ”.
CSS
div {arka plan rengi : rgb ( 238 , 190 , 118 ) ;
yükseklik : 150 piksel ;
sınır : 10 piksel çıkıntı rgb ( 6 , 56 , iki ) ;
yazı Boyutu : 50 piksel ;
}
Yukarıda açıklanan kodun çıktısı aşağıda verilmiştir. Burada, div ve onay kutusunun başarıyla oluşturulduğunu görebilirsiniz:
Şimdi, geçiş özelliğini kullanarak div'i gizleyip gösterdiğimiz bir sonraki adıma geçin.
2. Adım: Geçişli Bir Div'i Gösterin ve Gizleyin
Bunu yapmak için, “ayarlayarak geçiş efektini ayarlayacağız. opaklık ”, süresi “ 2s ” ve opaklığın değeri “ 0 ” CSS'de oluşturduğumuz div sınıfında:
geçiş : opaklık 2s ;opaklık : 0 ;
Not: geçişi uygulayacağız” opaklık ” özelliği, öğenin şeffaflığını ayarlamak için. Burada değerini “olarak belirteceğiz. 0 ”, yani geçiş başladığında div iki saniye boyunca gizlenecek.
Geçiş değerlerini ayarladıktan sonra “ giriş ” HTML dosyasında oluşturulan girdi türüne erişmek ve girdi öğesinin sözde sınıfını “ olarak ayarlamak için :kontrol ”. Ardından, oluşturulan div'e erişeceğiz ve “ + ” operatörü, onay kutusunu div ile ilişkilendirmek için kullanılacaktır. Bu nedenle, onay kutusu üzerinde bir işlem gerçekleştirildiğinde, kullanımı div'i etkileyecektir. Ardından, opaklık değerini “ olarak ayarlayacağız. 1 ”:
giriş : kontrol + div {opaklık : 1
}
Not: Opaklık değerini “ olarak belirleyeceğiz. 1 ”, bu, onay kutusu işaretlendiğinde oluşturulan div'in gösterileceği anlamına gelir. Ayrıca, div'i gizlemek için işaretini kaldırın
Gördüğünüz gibi, div “ kullanılarak gösterilir ve gizlenir. geçiş 'mülkiyet ve' :kontrol ” sözde sınıf öğesi:
CSS'de geçiş özelliği olan bir div'i gizleme ve gösterme yöntemini anlattık.
Çözüm
Bir div'i göstermek ve gizlemek için ' geçiş 'mülkiyet ve' :kontrol ” sözde sınıf öğesi, div opacity değeri “ olarak ayarlanacak şekilde kullanılır. 0 ” ve :checked sözde sınıf öğesinde, opaklığı “ olarak ayarlayın 1 ”. Kullanıcı onay kutusuna tıkladığında div görüntülenecek ve işaretlenmediğinde div gizlenecektir. Bu kılavuzda, geçiş özelliğini kullanarak div'i gizleme ve gösterme yöntemini anlattık.