Membuat Logo Berkedip

CSS
@import url(http://fonts.googleapis.com/css?family=Exo+2);
.logo {
  text-align: center;
  width: 350px;
  height: 120px;
  margin: auto;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
@-webkit-keyframes blink {
  79% {
    color: inherit;
    text-shadow: inherit;
  }
  80% {
    color: #333;
    text-shadow: none;
  }
  80.5% {
    color: inherit;
    text-shadow: inherit;
  }
  81% {
    color: #333;
    text-shadow: none;
  }
  81.5% {
    color: inherit;
    text-shadow: inherit;
  }
  82% {
    color: #333;
    text-shadow: none;
  }
  82.5% {
    color: inherit;
    text-shadow: inherit;
  }
.logo {
  font: 100 5em "Exo 2";
  color: #fff;
  text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #44ffff, 0 0 0.5em #44ffff, 0 0 0.1em #44ffff;
}
.logo b {
  -webkit-animation: blink linear infinite 10s;
  font: inherit;
}
HTML
<div class="logo">L<b>ogo</b>t<b>yp</b>e</div>

Hasilnya:


Logo ini di set untuk berkedip setiap 10 detik sekali. Untuk merubah durasinya, ganti angka 10 sesuai dengan keinginan.

Happy Blogging!

Allowed tag: <i>...</i> <b>...</b> [img]...[/img] <youtube>...</youtube> [pre]...[/pre]

Emoticons

:) :D :coffee :( :malu :sorry :takut :ultah :traveller :sup :sup2 :toast :confused :wizard :manyun :zzz :cool :lol :cat :mad :bandit :smoking