Text Shadow Animasi Pure CSS

Berikut ini akan diuraikan langkah-langkah cara membuat ( Text Shadow Animasi Pure CSS ) semoga artikel kali ini bermanfaat untuk kita semua.
Adapun Cara membuat : ( Text Shadow Animasi Pure CSS ) sebagai berikut :

DAFTAR ISI CODE [Tampilkan][Sembunyikan]

CSS Kode

<style>
.text {
margin-top:-40px;
color:#FFFF00;
font:bold italic 80px sans-serif;
text-transform:uppercase;
letter-spacing:1.4px;
-webkit-text-stroke:3px #00FF7F;
animation:text-shadow 3.5s ease-out infinite;
-webkit-animation:text-shadow 3.5s ease-out infinite;
-moz-animation:text-shadow 3.5s ease-out infinite;
-ms-animation:text-shadow 3.5s ease-out infinite;
-o-animation:text-shadow 3.5s ease-out infinite}

@-webkit-keyframes text-shadow {
15% {margin-left:0;text-shadow:none}
45%,55% {margin-left:1.25em;-webkit-text-stroke: 6px #FFF;
text-shadow:-10px 0 #FFFFFF,-20px 0 #FF0033,-30px 0 #FF8C00,-40px 0 #00FF7F,-50px 0 #7FFF00,-60px 0 aqua,70px 0 red}}

@-moz-keyframes text-shadow {
15% {margin-left:0;text-shadow:none}
45%,55% {margin-left:1.25em;-moz-text-stroke: 6px #FFF;
text-shadow:-10px 0 #FFFFFF,-20px 0 #FF0033,-30px 0 #FF8C00,-40px 0 #00FF7F,-50px 0 #7FFF00,-60px 0 aqua,70px 0 red}}

@keyframes text-shadow {
15% {margin-left:0;text-shadow:none}
45%,55% {margin-left:1.25em;text-stroke: 6px #FFF;
text-shadow:-10px 0 #FFFFFF,-20px 0 #FF0033,-30px 0 #FF8C00,-40px 0 #00FF7F,-50px 0 #7FFF00,-60px 0 aqua,70px 0 red}}
</style>
<div class="text">Sahabat Blogger 77</div>

Setelah semua kode html, (style, atau b:skin, dan javascript sudah di pasang sesuai posisinya masing-masing langkah terahir adalah Simpan, atau klik pratinjau tema terlebih dahulu,. Namun untuk saran tiada salahnya langsung klik SIMPAN dan lihat hasilnya, jika terjadi eror, dan kode tidak berfungsi dengan baik silahkan informasikan kami di kolom komentar, salam Team SAHAB BISNIS 77.

Demikian Cara membuat ( Text Shadow Animasi Pure CSS ) semoga bermanfaat terima kasih.