CSS ile Yanıp Sönen/Yanıp Sönen Metin Nasıl Yapılır?

” öğesi, div öğesi arasında bir başlık belirtmek için:

---

---

< div sınıf = 'göz kırpma tarzı' >
< h3 > linux h3 >
div >

HTML öğelerini biçimlendirmeye geçelim.

Stil 'göz kırpma stili' div

.blink stili {
arka plan: rgb ( 0 , 0 , 0 ) ;
}

CSS “ arka fon ” özelliği, “ sınıfı ile div öğesine uygulanır. göz kırpma stili ”.

Stil “h3” Elemanı

h3 {
metin hizalama: merkez;
yazı tipi ailesi: Verdana;
renk: #ffc310;
animasyon: yanıp sönen metin 1.9s lineer sonsuz;
yazı tipi boyutu: 6em;
}

HTML'

” öğesi, aşağıdaki CSS özellikleriyle dekore edilmiştir:

• “ Metin hizalama ” özelliği, öğenin metninin hizalamasını ayarlar.
• “ font ailesi ”, metin için bir yazı tipi stili tanımlar.
• “ renk ” öğesinin metnini renklendirmek için kullanılır.
• “ animasyon ”, animasyon adını, animasyon süresini, animasyon zamanlama işlevini ve animasyon-iteration-count özellik değerlerini belirten kısayol özelliğidir.
• “ yazı Boyutu ” özelliği, yazı tipi boyutunu esas olarak “px” ve “em” birimlerinde ayarlar.

'@keyframe kuralını' 'yanıp sönen metin' animasyonuna uygulayın

@ anahtar kareler yanıp sönen metin {
0 % {
opaklık: 0 ;
}
elli % {
opaklık: bir ;
}
100 % {
opaklık: 0 ;
}

Animasyon adı “ yanıp sönen metin ”, animasyon özelliğinde belirtilir. “ @keyframe Aşağıda belirtildiği gibi farklı aralıklarla animasyon davranışını gösteren animasyon adının önüne ” kuralı eklenir:

• “ de %0 ” animasyonu, metin opaklığı 0 olarak ayarlanmıştır.
• “ de elli% ” animasyonu, metin opaklığı 1 olarak ayarlanmıştır.
• “ de 100% ” animasyonu, metin opaklığı 0 olarak ayarlanmıştır.

Çıktı

Örnek 2: Birden Çok Yanıp Sönen Metin Oluşturma

HTML'de birden çok yanıp sönen metin oluşturmak için aşağıda verilen adımları izleyin:

• İlk olarak, bir “
  ” element ve ona bir sınıf atayın” metin-div ”.
• Ardından, iki 'ekleyin

  ” bazı metinler eklemek için öğeler.

• İlk “

  ” elemanına “ sınıfı atanır. yanıp sönen ”.

• İkincisine iki sınıf atanır, “ yanıp sönen ' ve ' bir ”. Stil özelliklerini bildirmek için her iki sınıfa da CSS'de erişilir:

< div sınıf = 'metin-div' >
< p sınıf = 'yanıp sönen' > pırıltı pırıltı p >
< p sınıf = 'yanıp sönen bir' > Küçük yıldız * p >
div >

Şimdi, HTML'ye stil vermek için CSS bölümüne göz atın '

' elementler.

Stil “text-div” div

.text-div {
genişlik: 400 piksel;
marj: araba;
arka plan rengi: rgb ( 42 , 49 , 49 ) ;
dolgu: 8 piksel;
}

“ .text-div ”,

öğesine erişmek için kullanılır. Küme parantezler içinde, aşağıdaki CSS özellikleri “.text-div”e uygulanır:

• “ Genişlik ” özelliği, öğenin genişliğini ayarlar.
• “ marj ” öğesinin etrafına boşluk ekler.
• “ arka plan rengi ” arka plan rengini ayarlar.
• “ dolgu malzemesi ” öğesinin sınırları içinde boşluk oluşturur.

Stil 'yanıp sönen' sınıf

.yanıp sönen {
Sarı renk;
yazı tipi boyutu: 40px;
yazı tipi ailesi: el yazısı;
yazı tipi ağırlığı: kalın;
animasyon: yanıp sönen stil 0,6 sn doğrusal sonsuz;
}

“ .yanıp sönen ”, HTML

etiketlerine erişmek için kullanılır. Bu sınıfta aşağıdaki özellikler uygulanır:

• “ yazı tipi ağırlığı ” yazı tipinin kalınlığını gösterir.
• Diğer özellikler yukarıdaki bölümde açıklanmıştır.

'@anahtar kare kuralını' 'yanıp sönme tarzı' animasyona uygulayın

@ anahtar kareler yanıp sönen stil {
0 % {
opaklık: 0 ;
}
}

“ davranışını ayarlayın yanıp sönen stil “ kullanarak animasyon @keyframe ' tüzük. Animasyonun başlangıcında, metin opaklığı 0 olacak ve bu, öğelerin tam şeffaflık seviyesini gösterir.

Animasyonu ikincide yapmak için “

' öğe biraz farklı, sınıf ' bir ”, aşağıdaki animasyon stilleriyle bildirilir:

Stil 'bir' sınıf

.bir {
animasyon: bir 1s lineer sonsuz;
}
@ anahtar kareler bir {
elli % {
opaklık: 0 ;
}
}

Çıktı

Farklı CSS stil özelliklerini kullanarak yanıp sönen metnin nasıl yapıldığını etkili bir şekilde öğrendik.

Çözüm

HTML'de, metin stilinin yanıp sönmesini sağlamak için birkaç CSS özelliği kullanılır. “ animasyon ' ve ' opaklık ” özellikleri genellikle bu bağlamda tanımlanır. Yanıp sönme davranışını ayarlamak için, “ @keyframe ” kuralı, bir animasyon özelliği için bildirildi. Bu makale, CSS kullanarak HTML'de yanıp sönen veya yanıp sönen metinlerin nasıl yapıldığını açıklamaktadır.