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>TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul= Text Shadow Animasi Pure CSS
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
Kalo pakai ini, teksnya bisa jadi lebih 3d ya. Wah, canggih juga ya css. Kapan-kapan pengen saya terapkan efek ini, lagipula cukup mudah.
BalasHapusasik bisa joget gitu ya sista....mana pake css doang lagi.
BalasHapuskalau penggunaan % dalam nilai keyframe untuk pergerakan ya sista? masih bingung dan mohon pencerahan.
kemarin kan gak sempat joget-joget mbah, karena jaim didepan doi, jadi sekarang jogetnya dipuasin , heheh..!!
Hapuskurang lebih seperti itu mbah, untuk memberi batas gerakan (max-right) saat teks bergeser, dengan % lebih mudah menentukan batas gerakan, kalau pixel atau em ukurannya lebih banyak..
.Waw, CSS serba guna ya mbak dev. bisa jadi animasi seperti itu. Simple tapi keren .
BalasHapus.Save dulu ya mbak..
.Oia mbak, kalau mau nanya-nanya sama mbak devy, dari mana ya?
bisa lewat update status Google+ saja mas, kalau lewat fb devy jarang buka facebook.
Hapuskalau ada hal yang mau ditanyakan tentang blogger, mas tag saja nama devy dalam status g+
.Cara tag di G+ gimana mbak dev? kurang tau soalnya. :D
Hapusah mas Dandy masa gak tahu sih, bercanda ya..!! hehe..!!
Hapusmemberi tag maksudnya agar apa yang mas publikasikan akan diberi tanda di profile G+ Devy, jadi Devy bisa langsung tahu kalau mas Dandy menandai akun G+ devy (notifikasi Google+) seperti itu mas.
.Memang gak tau loh mbak devy.. ;-( .Sering memang lihat beberapa orang ngeTag akun G+ orang lain, tapi bener gatau gimana caranya. :/
Hapuscoment ya di +G saya, udh di tag tuh.
Hapusnumpuk dan kelihatan jadi berseni dan cantik harus berani coba deh saya supaya bisa berkembang juga mengenai html atau css ini
BalasHapusjadi kaya gambar 3d
BalasHapusKeren ih cssnya . . cocok kali dipasanv buat header . , ??
BalasHapusBukan nya malah bikin mata puyeng yaaa kalo pake gerak2 macam ini ???
BalasHapus