CSS3 İle Neon Yazı Efekti

CSS3 animasyon efektleri candır. Kullanın kullandırın! :)

Html Kodu

<h1 class="neon"><span class="in">Bil</span><span class="out">gi</span> <span class="in">B</span><span class="out">log</span</h1>

CSS  Kodu

@-moz-keyframes neonglow {
20%, 70% {
color: #fff;
text-shadow: none;
}
25%, 50%, 75%, 95% {
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 20px #fe05fb, 0 0 30px #fe05fb;
}
55% {
color: #fff;
text-shadow: none;
}
}
@-moz-keyframes ontheblink {
21%, 39%, 45%, 47%, 53% {
color: #fff;
text-shadow: none;
}
26%, 38%, 40%, 44%, 46%, 48% {
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 20px #fe05fb, 0 0 30px #fe05fb;
}
}
@-ms-keyframes neonglow {
20%, 70% {
color: #fff;
text-shadow: none;
}
25%, 50%, 75%, 95% {
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 20px #fe05fb, 0 0 30px #fe05fb;
}
55% {
color: #fff;
text-shadow: none;
}
}
@-ms-keyframes ontheblink {
21%, 39%, 45%, 47%, 53% {
color: #fff;
text-shadow: none;
}
26%, 38%, 40%, 44%, 46%, 48% {
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 20px #fe05fb, 0 0 30px #fe05fb;
}
}
@-webkit-keyframes neonglow {
20%, 70% {
color: #fff;
text-shadow: none;
}
25%, 50%, 75%, 95% {
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 20px #fe05fb, 0 0 30px #fe05fb;
}
55% {
color: #fff;
text-shadow: none;
}
}
@-webkit-keyframes ontheblink {
21%, 39%, 45%, 47%, 53% {
color: #fff;
text-shadow: none;
}
26%, 38%, 40%, 44%, 46%, 48% {
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 20px #fe05fb, 0 0 30px #fe05fb;
}
}

.in {

-moz-animation: neonglow 10s infinite;
-ms-animation: neonglow 10s infinite;
-webkit-animation: neonglow 10s infinite;
color: #000;
}
.out {
-moz-animation: ontheblink 10s infinite;
-ms-animation: ontheblink 10s infinite;
-webkit-animation: ontheblink 10s infinite;
}

Demo İçin Tıkla

Kaynak : http://www.broken-links.com/tests/animations