5.00 / 1 oy

CSS ile yazıya yanıp sönme efekti eklemek

Bootstrap'te dahili bir yanıp sönme efekti kazandıran class bulamadım, ben de kendi yanıp sönme efektimi kendim yazdım :) JQuery ya da JavaScript kullanmak istemedim, diğer türlü bir timer ile display özelliğini değiştiren js kodlarını kullanmak da mümkün ama CSS'te animation gibi bir özellik varken hiç gerek yok. CSS kodlarını ve HTML uygulamasını aşağıda paylaşıyorum.

CSS Kodları

.yanson {
    animation: blinker 1s linear infinite;
}

Yazının yanıp sönme hızını değiştirmek için animation özelliğini değiştirebilirsiniz. Mesela çok daha yavaş yanıp sönen bir yazı istiyorsanız 10s olarak ayarlayabilirsiniz.

HTML Kodları

<span class="yanson">Buraya çok önemli bir duyuru gelebilir</span>

Sonuç:

yanip sonen yazi gif

Not: Yazıya renk ve boyut eklemek için aşağıdaki stiller uygulanmıştır:

.stil{
font-weight: 800;
font-size: 35px;
color: #fc1212;
}

 

BasParmak

20.02.2020 13:49

Bu soru henüz yanıtlanmamış.

Bu soruya sadece kayıtlı kullanıcılar yanıt yazabilirler. Yanıt yazmak için lütfen giriş yapınız.

Reitix
CSS ile yazıya yanıp sönme efekti eklemek

İnternet sitemizdeki deneyiminizi iyileştirmek için çerezler kullanıyoruz. Bu siteye giriş yaparak çerez kullanımını kabul etmiş sayılıyorsunuz. Daha fazla bilgi.