Membuat Animasi Text Bercahaya Dengan CSS

Hallo teman-teman dumet school, pada kesempatan kali ini saya akan Membuat Animasi Text Bercahaya Dengan CSS. Langkah pertama untuk dapat membuat animasi text bercahaya yaitu teman-teman siapkan struktur html yang berisi tulisan yang setiap hurufnya di pisah dengan tag html. Dan berikut ini adalah struktur htmlnya.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Membuat Animasi Text Bercahaya Dengan CSS</title>
    <link href="https://fonts.googleapis.com/css?family=Bad+Script&display=swap" rel="stylesheet">
</head>
<body>
    <h1>
        <span>D</span>
        <span>U</span>
        <span>M</span>
        <span>E</span>
        <span>T</span>
    </h1>
</body>
</html>

Jika sudah masih di file yang sama dengan struktur htmlnya, tema-teman buat tag style untuk memberikan style css pada strukur htmlnya.

<style>
        body{
            margin:0;
            padding: 0;
            display: flex;
            align-items: center;
            height: 100vh;
            background-color: #000;
            font-family: 'Bad Script', cursive;
        }
        h1{
            margin:auto;
            padding: 0;
            color:#111;
            font-size: 50px;
        }
        h1 span{
            display: table-cell;
            margin: 0;
            padding: 0;
            animation: animate 2s linear infinite;
        }
        h1 span:nth-child(1){
            animation-delay: 0s;
        }
        h1 span:nth-child(2){
            animation-delay: 0.25s;
        }
        h1 span:nth-child(3){
            animation-delay: 0.50s;
        }
        h1 span:nth-child(4){
            animation-delay: 0.75s;
        }
        h1 span:nth-child(5){
            animation-delay: 1s;
        }
        @keyframes animate{
            0%,100%{
                color:#fff;
                filter: blur(2px);
                text-shadow: 0 0 10px #00b3ff,
                            0 0 20px #00b3ff,
                            0 0 40px #00b3ff,
                            0 0 80px #00b3ff,
                            0 0 120px #00b3ff,
                            0 0 200px #00b3ff,
                            0 0 300px #00b3ff,
                            0 0 400px #00b3ff;
            }
            5%,95%{
                color:#111;
                filter: blur(0px);
            }
            {
                color:#111;
                filter: blur(0px);
                text-shadow: 0 0 10px none;
            }
        }
    </style>

Untuk membuat animasi bercahaya pada text yang sudah saya buat di html, saya menggunakan property dari css yaitu text-shadow. Dan kemudian untuk membuat animasi bercahaya pada text secara berurutan maka disini saya berikan property animation-delay di masing-masing text yang di bungkus oleh tag span html.

Jika teman-teman buka di halaman browser masing-masing maka tampilannya akan seperti pada gambar di bawah ini.

Membuat Animasi Text Bercahaya Dengan CSS

Demikian cara Membuat Animasi Text Bercahaya Dengan CSS. Semoga artikel ini dapat memberikan manfaat untuk teman-teman yang sedang mendalami css dan selamat mencoba untuk kalian.

28 Oktober 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat