Text Shadow Animasi Pure CSS

By | Juli 20, 2019
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

Collections of animated text effects for You

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:

DEMO SHOW

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>

loading...

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *