Web Geliştirici | Tasarımcı

CSS Yanıp Sönme Efekti

Css kullanarak html veya php dosyalarınıza dikkat çekici yazı efekti sağlayın.

Bu animasyon efektinin tam olarak adı “blink” olarak bilinmektedir. Blink efekti ile sizde yazılarınıza, cisminize veya herhangi bir objeye yanıp sönme efekti kazandırabilirsiniz.

Javascript Gerektirmez

Buradaki tüm kodlar css ile çalışmaktadır. Ekstra javascript kodu gerektirmeden sizde yazılarınıza efektler verebilirsiniz.

Kurulum

Aşağıda sizler için Örnek Kod verilmiştir. Bu kod ile objenize bu efekti sağlayabilirsiniz.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .blink {
      animation: blinker 0.9s linear infinite;
      color: #1c87c9;
      font-size: 30px;
      font-weight: bold;
      font-family: sans-serif;
      }
      @keyframes blinker {  
      50% { opacity: 0; }
      }
    </style>
  </head>
  <body>
    <p class="blink">Yanıp Sönen Yazı</p>
  </body>
</html>

Yanıp sönme hızı nasıl belirlenir?

Kod kısmında bulunan

animation: blinker 0.9s linear infinite;

alana ulaşın ve blinker 0.9s kısmındaki “0.9” alanı bizim yazımızın yanıp sönme süresini belirler bu kısmı ne kadar kısaltırsanız o kadar hızlı ne kadar arttırırsanız o kadar yavaş yanıp sönmektedir.

Örnek olarak: 1.5 yaparsak çok daha yavaş, 0.2 yaparsak çok daha hızlı olacaktır.

Bu yazımızda CSS yanıp sönme efektini inceledik. Yorumlarınız ile merak ettiğiniz soruları sorabilirsiniz.

Resimde otomatik yakınlaştırma efekti

Resimlerinizde veya slider ögelerinizde çok olayca yakınlaşyırma yapın. Aşağıda verilen kodları sitenizin CSS veya HTML yapısındaki alanına yapıştırın ve img kısmını kendinize […]

Bir yorum ekleyin

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

6 yorum “CSS Yanıp Sönme Efekti”