Bu makale şunları sağlayacaktır:
- Yöntem 1: CSS animasyon Özelliğini Kullanarak Solma Efekti
- Yöntem 2: CSS geçiş Özelliğini Kullanarak Solma Efekti
Yöntem 1: CSS “animation” Özelliğini Kullanarak Solma Efekti
Basit bir HTML sayfası tasarlamak için üzerine aşağıdaki öğeyi ekleyin:
- Ekle ' ' öğesi ile birlikte ' stil ' bağlanmak. 'style' niteliği, öğenin stil özelliklerini içerir.
- Uygulamak ' renk Öğenin metin rengini tanımlamak için style özniteliğindeki ” özelliği.
- Bundan sonra, “ Metin veya basit bir paragraf eklemek için ” öğesi.
HTML kodu aşağıdadır:
< h2 stil = 'renk: rgb(84, 8, 191)' >
Linuxhint Eğitim Web Sitesi
< / h2 >
< p > sayfa yüklemede solma efekti < / p >
HTML sayfası başarıyla oluşturuldu:
Sayfada fade-in efekti uygulamak için CSS bölümünde “ animasyon “ üzerinde CSS özelliği kullanılacaktır.
Stil 'vücut' Elemanı
gövde {animasyon: fadeInPage kolaylığı 3s;
animasyon yineleme sayısı: bir ;
}
'
', aşağıdaki CSS özellikleriyle uygulanır:- “ animasyon ”, birden çok değer belirterek animasyonu ayarlayan kısayol özelliğidir. Burada animasyon adı, animasyon-zamanlama-fonksiyonu ve animasyon-süresi tanımlanır.
- “ animasyon yineleme sayısı ”, animasyonun kaç kez yinelenmesi gerektiğini tanımlar.
'Animasyon' üzerinde '@keyframes' kurallarını uygulayın
@keyframes fadeInPage {0 % {
opaklık: 0 ;
}
100 % {
opaklık: bir ;
}
}
“ tanımlamak için @keyframes ” animasyon kuralları, @keyframes anahtar sözcüğünden sonra animasyon adını belirtin. Animasyon davranışını aşağıdaki gibi değiştirin:
- “ de %0 ” animasyon, “ opaklık ” özelliğine 0 değeri atanır. Animasyon başladığında görüntünün şeffaf olduğu anlamına gelir.
- “ de 100% ” animasyon, opaklık “ olarak ayarlanmıştır. bir ”, bu da düz bir rengi ifade eder.
Çıktı
Sayfa yüklemede Fade-in efektini uygulamak için ikinci yönteme geçelim.
Yöntem 2: CSS 'geçiş' Özelliğini Kullanarak Solma Efekti
“ ekle aşırı yük ' özniteliği ' içinde
Bu örnekte, CSS ' geçiş ” özelliği, bir solma efekti eklemek için kullanılır:
gövde {opaklık: 0 ;
geçiş: opaklık 6s;
}
Yukarıda belirtilen özelliklerin açıklaması aşağıdadır:
- “ opaklık ” özelliği, elemanların şeffaflığını tanımlar.
- CSS'yi kullanma ' geçiş ”, özelliklerin değerlerini belirli bir süre boyunca kademeli olarak değiştirin.
Çıktı
Size, sayfa yüklemede yavaşlama efekti için CSS kullanma yöntemlerini öğrettik.
Çözüm
HTML öğeleri üzerinde bir solma efekti uygulamak için çeşitli CSS özellikleri kullanılabilir. Daha spesifik olarak, “ animasyon ”, “ opaklık ', ve ' geçiş ” özellikleri, sayfalar veya öğeler üzerindeki hareketli efektleri belirtmek için kullanılabilir. Animasyonlar “ kullanılarak ayarlanır. @keyframe ' tüzük. Bu makale, CSS kullanarak sayfa yüklemede solma efekti ekleme yöntemlerini açıklamaktadır.