Membuat Animasi Text Bercahaya Dengan CSS

28/10/2019    Shelli Ripati    57     Website

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.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More