Cara Buat Text Bercahaya dan Berkerlap Kerlip di HTML

- Selamat malam agan-agan, kali ini saya akan share sesuatu yang berhubungan dengan HTML dan CSS.  Di sini agan-agan pasti sudah mengenal HTML dan CSS. Malam ini, yang akan saya share adalah,

Anda dapat membuat teks berkedip di HTML menggunakan JavaScript dan CSS. Berikut adalah contoh kode yang dapat Anda gunakan:

HTML:

bash
<p id="blink">Teks yang akan berkedip</p>

CSS:

css
.blink {
    animation: blinker 0.6s linear infinite;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}

JavaScript:

javascript
const blink = document.getElementById('blink');
setInterval(function() {
    blink.classList.toggle('blink');
}, 600);

Penjelasan:

• Pertama-tama, kita memberikan id "blink" pada elemen HTML yang akan kita buat berkedip.
• Kemudian, kita mendefinisikan animasi CSS dengan nama "blinker". Animasi ini akan membuat opasitas teks berubah dari 1 ke 0 pada 50% dari durasi animasi, dan kembali ke 1 pada 100% dari durasi animasi.
• Selanjutnya, kita menggunakan JavaScript untuk mengatur interval berapa sering teks akan berkedip, dalam contoh ini adalah setiap 600 milidetik. Kita menggunakan metode classList.toggle untuk menambahkan atau menghapus kelas CSS "blink" pada elemen HTML dengan id "blink".

Dengan kode ini, teks yang memiliki id "blink" akan berkedip dengan durasi 0,6 detik dan berulang terus-menerus. Anda dapat mengubah durasi animasi atau interval dengan mengubah nilai di kode JavaScript.

Cara Membuat Teks Bercahaya dan Berkedip di HTML

Seperti contoh di bawah ini.

Bagaimana? apakah agan tertarik untuk mencoba?
Jika begitu saya akan jelaskan langkahnya.

1. Copas code berikut dibawah </head>

<style>
      h1 {
    color: #19abff;
    font-size: 40px;
    margin: 1px auto;
    text-align:center;
    text-transform:uppercase;
        }
    .neon {
    color: #FFFFFF;
    text-shadow: 0 0 5px #19abff, 0 0 10px #19abff, 0 0 20px #19abff, 0 0 45px #19abff, 0 0 40px #19abff;
    }
    </style>

*Tulisan merah berarti dapat diganti.
*# adalah kode warna. Kode warna dapat dicari di google.

2. Copas juga code berikut dibawah code yang tadi.

<script language="JavaScript1.2">
function ClearError() {return true;}
window.onerror = ClearError;
</script>
<script>
window.onload = function() {
var h1 = document.getElementsByTagName("h1")[0],
text = h1.innerText || h1.textContent,
split = [], i, lit = 0, timer = null;
for(i = 0; i < text.length; ++i) {
split.push("<span>" + text[i] + "</span>");
}
h1.innerHTML = split.join("");
split = h1.childNodes;

var flicker = function() {
lit += 0.01;
if(lit >= 1) {
clearInterval(timer);
}
for(i = 0; i < split.length; ++i) {
if(Math.random() < lit) {
split[i].className = "neon";
} else {
split[i].className = "";
}
}
}
setInterval(flicker, 100);
}
</script>
<br><br>
<h1>Contoh Teks bercahaya dan berkedip</h1>

 *Tulisan merah dapat diganti.

3. Selesai.

4. Silahkan di save dan dicoba.
5. Jika ada kesalahan silahkan bertana di komentar.


Semoga bermanfaat Sekian dari saya, terima kasih..

Wassalamu'alaikum Wr. Wb