Cara Buat Efek Text Shadow Animasi Dengan CSS Keren !!!

Baca Juga

Blog Ponsel Si Oon - Cara Buat Efek Text Shadow Animasi Dengan CSS Keren !!! berbicara soal text shadow .. semua blogger tentunya sudah tau bahkan sudah tidak asing lagi mendengar nya .. namun taukah bahwa text berbayang / text shadow bisa juga di gerakan ??? .. sebagian besar tentunya sudah tau .. namun bagi blogger - blogger pemula ( newbie ) seperti saya ini .. tentunya ini adalah hal yang sangat asing dan tidak tau bagaimana cara buat nya ?? .. nah maka dari itu .. pada kesempatan malam hari ini .. akan saya bagikan soal Cara Buat Efek Text Shadow Animasi Dengan CSS Keren !!!

Efek animasi ini adalah bagaimana cara membuat text bergerak atau bergeser kekanan secara infinite ( tidak terbatas ) .. namun yang kita gerakkan hanya banyangan text dengan jarak per 10px .. Ibarat Anda berjalan yang sudah pasti meninggalkan jejak kaki disetiap langkah demi langkah nya .. terkecuali Anda bisa terbang pasti tidak ada jejak kaki atau bekas pijakan kaki .. hehe !!! ..

Gerakan ini sama seperti efek Animasi Text Hitam Putih Dengan Marquee ?? .. hanya teks saya tumpuk dalam beberapa warna sebagai banyangan ( shadow ) .. ada 7 teks yang bertumpuk dalam satu area, namun saya pisahkan dengan warna untuk membedakan text nya ..

Ok next .. tanpa banyak basa - basi lagi .. kita langsung saja kepembahasan kali ini .. yaitu Cara Buat Efek Text Shadow Animasi Dengan CSS Keren !!! yang mungkin Membuat tampilan text seperti ini menurut Anda bisa menarik perhatian pengunjung bertamu di blog Anda .. efek Text Shadow Animasi Hanya dengan CSS seperti ini bisa Anda jadikan alternatif .. suatu saat Anda ingin membuat hiasan judul blog dengan text bergerak seperti ini ..

<style type="text/css">
.text {
margin-top:-40px;
color:#FF1493;
font:bold italic 80px sans-serif;
text-transform:uppercase;
letter-spacing:1.4px;
-webkit-text-stroke:3px #00bfff;
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 #FFd700,-30px 0 #FF8C00,-40px 0 #00bfff,-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 #FFd700,-30px 0 #FF8C00,-40px 0 #00bfff,-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 #FFd700,-30px 0 #FF8C00,-40px 0 #00bfff,-50px 0 #7FFF00,-60px 0 aqua,70px 0 red;
}}
</style>

/* Cara Buat Text Shadow Animasinya Sebagai Berikut */

<div class="text">Wolf ( Wida Ocha Love Forever )</div>

Gimana .. sangat keren dan mudah banget bukan ?? .. cuma dengan Code CSS sudah dapat menghasilkan text yang keren .. yang biasa menjadi luar biasa :D .. ok next .. saya rasa cukup sampe disini .. kurang lebihnya mohon di maklum saja .. semoga bermanfaat bagi yang membutuhkan dan terimakasih sudah membaca Cara Buat Efek Text Shadow Animasi Dengan CSS Keren !!!dan dibawah ini demo hasil pembuatan nya ..

Wolf ( Wida Ocha Love Forever )

Tag : #Cara, #Cara Buat, #Cara Membuat, #Text, #Shadow, #Berbayang, #Text Shadow, #Text Berbayang, ,#Animasi, #CSS, #HTML, #CSS Keren, #Cara Buat Efek Text Shadow Animasi Dengan CSS Keren !!!