Membuat Efek Animasi Lampu Neon Pada Teks Dengan HTML Dan CSS3

Labkom99.com – Membuat Efek Animasi Lampu Neon Pada Teks Dengan HTML Dan CSS3 murni untuk membuat efek lampu neon yang berkedip. Huruf LABKOM99 di tengah layar berkedip dengan efek visual lampu neon yang terus berubah dan mengalir. Animasi lampu neon mengalir dan berubah di sepanjang tepi teks, dengan efek keseluruhan yang halus dan realistis. 

Efek animasi didasarkan pada gambar CSS3 murni dan tidak memperkenalkan elemen skrip grafis atau JS apapun. Direkomendasikan untuk menggunakan browser seperti Firefox atau Chrome yang mendukung HTML5 dan CSS3.  

  Content HTML dan CSS3 lain yang dapat anda pelajari :  

• Membuat Efek Animasi Teks Berkedip Dengan HTML Dan CSS3
• Belajar HTML Dan CSS Membuat Animasi Cantik Pada Tulisan
• Belajar HTML Dan CSS3 Membuat Mouseover Zoom Dan Efek Thumbnail
• Membuat Efek Refleksi Membalik Gambar Dengan HTML Dan CSS3
• Membuat Teks Mirror Efek Bergetar Dengan HTML Dan CSS
• Membuat Efek Animasi Roket Meluncur Keren Dengan HTML5 CSS3 Dan SVG
• Belajar HTML5 Dan Canvas Membuat Efek Animasi Hue Ball Berbagai Warna
• Belajar HTML5 Dan Canvas Membuat Bola Api Luncur

Alat / Bahan Baku

Notepad

Tools pemrograman HTML lain

Perhatian 

Sebelum Membuat Efek Animasi Lampu Neon Pada Teks Dengan HTML Dan CSS3 pada bagian ini sebaiknya memahami terlebih dahulu tentang Tutorial Belajar Dasar – Dasar HTML: Hypertext Markup Language, Struktur dasar HTML , cara membuat template, cara menyimpan dan cara membuka file HTML yang sudah di bahas  pada pembahasan Bagaimana Cara Membuat Template HTML 

Metode / Langkah

Untuk dapat Membuat Efek Animasi Lampu Neon Pada Tesk Dengan HTML Dan CSS3 diperlukan kode CSS3 seperti yang ada di bawah ini :

.text-effect {
    overflow: hidden;
    position: relative;
    -webkit-filter: contrast(110%) brightness(190%);
    filter: contrast(110%) brightness(190%);
}
.neon {
    position: relative;
    background: black;
    color: transparent;
}
.neon::before,
.neon::after {
    content: attr(data-text);
    color: white;
    -webkit-filter: blur(0.02em);
    filter: blur(0.02em);
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}
.neon::after {
    mix-blend-mode: difference;
}
.gradient,
.spotlight {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    pointer-events: none;
    z-index: 10;
}
.gradient {
    background: -webkit-linear-gradient(45deg, red, blue);
    background: linear-gradient(45deg, red, blue);
    mix-blend-mode: multiply;
}
.spotlight {
    -webkit-animation: light 5s infinite linear;
    animation: light 5s infinite linear;
    background: -webkit-radial-gradient(circle, #ffffff, rgba(0, 0, 0, 0) 25%) 0 0/25% 25%, -webkit-radial-gradient(circle, #ffffff, #000000 25%) 50% 50%/12.5% 12.5%;
    background: radial-gradient(circle, #ffffff, rgba(0, 0, 0, 0) 25%) 0 0/25% 25%, radial-gradient(circle, #ffffff, #000000 25%) 50% 50%/12.5% 12.5%;
    top: -100%;
    left: -100%;
    mix-blend-mode: color-dodge;
}
@-webkit-keyframes light {
    100% {
        -webkit-transform: translate3d(50%, 50%, 0);
        transform: translate3d(50%, 50%, 0);
    }
}
@keyframes light {
    100% {
        -webkit-transform: translate3d(50%, 50%, 0);
        transform: translate3d(50%, 50%, 0);
    }
}
.neon {
    font: 700 220px 'Lato', sans-serif;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
}
.neon:focus {
    outline: none;
    border: 1px dotted white;
}
body {
    background: black;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 100vh;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

Kode CSS3 diatas yang merupakan desain untuk menghasilkan efek animasi lampu neon pada tesk. Perhatikan pada kode .text-effect { yang berfungsi untuk mengatur warna tesk. Kemudian pada kode .neon { untuk mengatur posisi dan backround lampu neon. Juga sedit menggunakan efek gradient dan spotlight.

Selanjutnya untuk Kode HTMLnya sangat simple hanya membuat tag yang di fungsikan untuk menuliskan tesk yang akan ditampilkan pada halaman. Berikut kode HTMLnya :  

<div class="text-effect">
    <h1 class="neon" data-text="LABKOM99" contenteditable>LABKOM99</h1>
    <div class="gradient"></div>
    <div class="spotlight"></div>
</div>

Dengan menggunakan div class untuk memanggil CSS yang akan dikombinasikan dengan tesk. Berikut ini kode lengkap Membuat Efek Animasi Lampu Neon Pada Teks Dengan HTML Dan CSS3.