Labkom99.comMembuat 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.

Membuat Efek Animasi Lampu Neon Pada Tesk Dengan HTML Dan CSS3


Content HTML dan CSS3 lain yang dapat anda pelajari :

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

<html>
<head>
<title> Labkom99.com - Membuat Efek Animasi Lampu Neon Pada Tesk Dengan HTML Dan CSS3 </title>
<style>
.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;
}
</style>
    <body>
    <div class="text-effect">
    <h1 class="neon" data-text="LABKOM99" contenteditable>LABKOM99</h1>
    <div class="gradient"></div>
    <div class="spotlight"></div>
</div>
    </body>
</head>
</html>

Selamat Mencoba ....!!!!!

Komentar