Cara Membuat Teks Bersinar Menggunakan HTML

Cara Membuat Glowing Text Menggunakan HTML - Selamat pagi, kembali lagi di TutorialKomputer.net. Pada kesempatan kali ini, saya akan memberikan tutorial tentang cara membuat teks menjadi bersinar menggunakan HTML. Membuat teks menjadi bersinar tidak hanya bisa kita buat dengan aplikasi desain grafis saja, tapi dengan HTML juga bisa.



Berikut ini merupakan efek bersinar yang akan kita buat kali ini.


TutorialKomputer.net


Dibawah ini merupakan skrip untuk membuat teks menjadi bersinar.


<style>

.glow {
  font-size: 80px;
  color: #fff;
  text-align: center;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #0500e6, 0 0 40px #0500e6, 0 0 50px #0500e6, 0 0 60px #0500e6, 0 0 70px #0500e6;
  }
  
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}
</style>

<h1 class="glow">TutorialKomputer.net</h1>


Salin skrip HTML diatas lalu tempelkan di HTML Editor kemudian klik "Run" maka akan muncul teks dengan efek glow. 


Baca Juga : Cara Membuat Animasi Loading di HTML


Sekian tutorial singkat terkait dengan bagaimana membuat teks menjadi bersinar di HTML. Sampai jumpa di tutorial selanjutnya.


Baca Juga :
Guru, Desainer, Programmer

Posting Komentar