Hallo Teman-teman bertemu lagi pada tutorial dumet school, pada tutorial kali ini saya akan sharing tentang bagai mana cara Membuat Efek Animasi Text Glowing Dengan CSS
, jadi nanti hasilnya textnya akan berkedip seperti efek fade in dan fade out, namun kita membuatnya tidak menggunakan javascript melainkan menggunakan CSS.
oke kita langsung saja praktekan, teman-teman silahkan buat sebuah file html dan ketikan script berikut:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <div class="textglow"> <span>D</span> <span>U</span> <span>M</span> <span>E</span> <span>T</span> <span>-</span> <span>S</span> <span>C</span> <span>H</span> <span>O</span> <span>O</span> <span>L</span> </div> </body> </html>
sekarang kita akan atur CSSnya, silahkan teman-teman ketikan script CSS berikut :
<style>
.textglow { text-align: center; font-size: 30px; color: transparent; letter-spacing: -3px;}
.textglow span { text-shadow: 0 0 2px rgba(400, 040, 212,0.9), 0 15px 25px rgba(0, 0, 0, 0.3), 0 -2px 3px rgba(0, 0, 0, 0.1), 0 -5px 10px rgba(255, 255, 255, 0.5), 0 5px 10px rgba(0, 0, 0, 0.3), 0 3px 4px rgba(255, 255, 255, 0.2), 0 0 20px rgba(255, 255, 255, 0.45); animation: loading 1.2s ease-in-out infinite alternate; }
@keyframes loading { to { text-shadow: 0 0 8px rgba(300, 208, 212,0.2), 0 0 9px rgba(0, 0, 0, 0.08), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(500, 500, 500, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(255, 255, 255, 0);} }
.textmetalic span:nth-child(2) { animation-delay:0.2s; }
.textmetalic span:nth-child(3) { animation-delay:0.4s; }
.textmetalic span:nth-child(4) { animation-delay:0.6s; }
.textmetalic span:nth-child(5) { animation-delay:0.8s; }
.textmetalic span:nth-child(6) { animation-delay:1s; }
.textmetalic span:nth-child(7) { animation-delay:1.2s; }
</style>
Jika sudah silahkan teman-teman save dan jalankan pada browser masing-masing, gimana?
oke, sampai sini dulu tutorial kali ini, selamat mencoba.
terimakasih.