Andalan Tech

Home
HTML

Cara Membuat Teks Bercahaya (Neon) dan Berkedip di HTML

Assalamu'alaikum Wr. Wb

AD-ITech - 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,

Cara Membuat Teks Bercahaya dan Berkedip di HTML

Sperti 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.


Membuat Teks Bercahaya dan Berkedip di HTML

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


Sekian dari saya, terima kasih..

Wassalamu'alaikum Wr. Wb