Text Shadow Animasi Pure CSS - Efek animasi kali ini adalah bagaimana cara membuat teks bergerak atau bergeser kekanan secara infinite (tidak terbatas), namun yang kita gerakkan hanya banyangan teks dengan jarak per 10px. Ibarat Anda berjalan yang sudah pasti meninggalkan jejak kaki disetiap langkah demi langkah, terkecuali Anda bisa terbang pasti tidak ada jejak kaki atau bekas pijakan kaki (sidik jari), hehe..!!
Gerakan ini sama seperti efek » Animasi Teks 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 teks.
Membuat tampilan teks yang menurut Anda bisa menarik perhatian pengunjung bertamu di blog Anda, efek Text Shadow Animasi Pure CSS seperti ini bisa Anda jadikan alternatif suatu saat Anda ingin membuat hiasan judul blog dengan teks bergerak seperti ini:
Gerakan ini sama seperti efek » Animasi Teks 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 teks.
Collections of animated text effects for You
- Menampilkan Bayangan Teks Saat Hover
- 10 Gaya Efek CSS Animasi Pada Teks
- Membuat Animasi Teks Berputar Efek 3D
- Menggerakkan Bayangan Teks Dengan Mouse
Membuat tampilan teks yang menurut Anda bisa menarik perhatian pengunjung bertamu di blog Anda, efek Text Shadow Animasi Pure CSS seperti ini bisa Anda jadikan alternatif suatu saat Anda ingin membuat hiasan judul blog dengan teks bergerak seperti ini:
Bagaimana, mau mencoba teks bergerak seperti ini? CSS lengkapnya seperti ini:
<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>
No comments:
Post a Comment