Membuat Teks Berkedip Dengan Animasi Blink

Membuat Teks Berkedip Dengan Animasi Blink - Elemen blink digunakan untuk membuat teks berkedip, namun efek ini tidak dapat bekerja pada semua vendor browser. Kita buat contoh seperti ini misalnya:

<blink>SAHABAT BLOGGER 77</blink>

Coba lihat hasil tampilannya pada browser chrome, teks tidak berkedip seperti yang kita harapkan, tetapi elemen ini masih dapat bekerja pada M.fx (Mozilla Firefox pada versi-versi tertentu). Membuat penasaran, mencari tahu apa sih penyebabnya?, dan alhamdulillah sampai sekarang saya belum menemukan solusinya,hehe..!! mungkin sahabat setia pecinta SAHABAT BLOGGER 77 dapat membantu rasa penasaran ini, Devy tunggu ya di kolom komentar.

Sambil menunggu pemecahan masalah ini, Membuat teks berkedip tidak harus selalu dengan elemen blink, Anda bisa membuatnya dengan penggunaan CSS untuk memainkan peran warna menggunakan efek animasi seperti ini:

<style type="text/css">
.anim-blink {
  color: white;
  margin:0 auto;
  font-size: 55px;
  position: relative;}

@keyframes noise-anim {
  0% {clip: rect(3px, 9999px, 77px, 0);}
  5% {clip: rect(92px, 9999px, 90px, 0);}
  10% {clip: rect(20px, 9999px, 53px, 0);}
  15.0% {clip: rect(49px, 9999px, 67px, 0);}
  20% {clip: rect(98px, 9999px, 83px, 0);}
  25% {clip: rect(81px, 9999px, 18px, 0);}
  30.0% {clip: rect(79px, 9999px, 34px, 0);}
  35% {clip: rect(33px, 9999px, 33px, 0);}
  40% {clip: rect(3px, 9999px, 48px, 0);}
  45% {clip: rect(30px, 9999px, 65px, 0);}
  50% {clip: rect(59px, 9999px, 34px, 0);}
  55.0% {clip: rect(59px, 9999px, 70px, 0);}
  60.0% {clip: rect(22px, 9999px, 49px, 0);}
  65% {clip: rect(1px, 9999px, 51px, 0);}
  70% {clip: rect(76px, 9999px, 88px, 0);}
  75% {clip: rect(49px, 9999px, 75px, 0);}
  80% {clip: rect(74px, 9999px, 84px, 0);}
  85.0% {clip: rect(95px, 9999px, 76px, 0);}
  90% {clip: rect(97px, 9999px, 1px, 0);}
  95% {clip: rect(91px, 9999px, 89px, 0);}
  100% {clip: rect(15px, 9999px, 17px, 0);}}

.anim-blink:after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -3px 5px red;
  top: 0;
  color: white;
  background: transparent;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse;}

@keyframes noise-anim-2 {
  0% {clip: rect(99px, 9999px, 75px, 0);}
  5% {clip: rect(27px, 9999px, 55px, 0);}
  10% {clip: rect(2px, 9999px, 33px, 0);}
  15.0% {clip: rect(75px, 9999px, 57px, 0);}
  20% {clip: rect(12px, 9999px, 84px, 0);}
  25% {clip: rect(98px, 9999px, 13px, 0);}
  30.0% {clip: rect(50px, 9999px, 25px, 0);}
  35% {clip: rect(70px, 9999px, 48px, 0);}
  40% {clip: rect(71px, 9999px, 8px, 0);}
  45% {clip: rect(8px, 9999px, 99px, 0);}
  50% {clip: rect(11px, 9999px, 2px, 0);}
  55.0% {clip: rect(33px, 9999px, 49px, 0);}
  60.0% {clip: rect(74px, 9999px, 86px, 0);}
  65% {clip: rect(52px, 9999px, 62px, 0);}
  70% {clip: rect(30px, 9999px, 88px, 0);}
  75% {clip: rect(46px, 9999px, 14px, 0);}
  80% {clip: rect(86px, 9999px, 68px, 0);}
  85.0% {clip: rect(42px, 9999px, 24px, 0);}
  90% {clip: rect(91px, 9999px, 57px, 0);}
  95% {clip: rect(57px, 9999px, 60px, 0);}
  100% {clip: rect(78px, 9999px, 67px, 0);}}

.anim-blink:before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 3px 5px #39f;
  top: 0;
  color: white;
  background: transparent;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-2 3s infinite linear alternate-reverse;}
</style>
<div class="anim-blink" data-text="SAHABAT BLOGGER 77">
SAHABAT BLOGGER 77</div>

DEMO SHOW



Walau tidak seindah tampilan blink, tetapi hasilnya lumayan cantik dan keren bukan..!! Karena disana kita hanya membuat ilustrasi untuk memanipulasi pergantian warna dengan pengaturan nilai-nilai pada ►text-shadow, seperti saat Anda Menciptakan Efek Pelangi Pada Text.

Fungsinya bisa Anda jadikan untuk membuat "BANNER LINK" atau untuk membuat rasa ketertarikan pembaca dengan membuat teks berkedip pada judul widget di blog Anda.

Selamat berinovasi ya..!! happy blogging.