BLANTERORIONv101
Home Css tutorial

Membuat Animasi Border Gredient dengan Css

7 Juli 2022
Membuat Animasi Border Gredient dengan Css

Pada artikel ini saya akan membagikan sebuah CSS Tricks. Kita akan Membuat Animasi Border Gredient dengan Css, seperti yang kita ketahui Css merupakan singkatan dari Cascading Style Sheet dengan menggunakan Css kita dapat mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML.

Dengan menggunakan Css kita juga dapat mempercepat halaman web, meudahkan pengeloaan kode, menawarkan lebih banyak variasi tampilan, membuat website menjadi rapi dan menarik.

Untuk itu mari langsung saja kita Membuat Animasi Border Gredient dengan Css :

Membuat Animasi Border Gredient dengan Css
Output



Kode HTML

Pada bagian ini kita perlu untuk membuat suatu file dengan ektensi .html kemudian kita akan membuat suatu class di dalam tag div dengan nama card atau Anda bisa juga membuat class dengan nama bebas dan taruh di dalam body.
<div class="card">
    <span>CARD</span>
</div>

Kode CSS

Lalu pada bagian ini kita akan menggunakan css untuk membuat tampilan tersebut. Anda bisa buat file baru dengan nama style dan ekstensi .css atau langsung saja tambahkan css di antara <head> dan </head>.
<style>
        .card{
            display: grid;
            place-items: center;
            position: relative;
            height: 150px;
            width: 150px;
            background: #191919;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: -4px 2px 6px 0px rgba(0,0,0,0.51);
        }

        .card::before{
            content: '';
            width: 60px;
            height: 300px;
            left: 10px;
            top: -70px;
            position: absolute;
            background: linear-gradient(#00e5ff, #b400fb);
            animation: animate 5s linear infinite;
        }

        @keyframes animate{
            0% { transform:rotate(0deg); }

            100% { transform:rotate(360deg); }
        }

        .card::after{
            content: '';
            position: absolute;
            background: #191919;
            inset: 4px;
            border-radius: 7px;
        }
    </style>

Kode Lengkap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SarjanaIT - Membuat Animasi Border Gredient dengan Css</title>

    <style>
        .card{
            display: grid;
            place-items: center;
            position: relative;
            height: 150px;
            width: 150px;
            background: #191919;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: -4px 2px 6px 0px rgba(0,0,0,0.51);
        }

        .card::before{
            content: '';
            width: 60px;
            height: 300px;
            left: 10px;
            top: -70px;
            position: absolute;
            background: linear-gradient(#00e5ff, #b400fb);
            animation: animate 5s linear infinite;
        }

        @keyframes animate{
            0% { transform:rotate(0deg); }

            100% { transform:rotate(360deg); }
        }

        .card::after{
            content: '';
            position: absolute;
            background: #191919;
            inset: 4px;
            border-radius: 7px;
        }
    </style>
</head>
<body>
    <div class="card">
        <span>CARD</span>
    </div>
</body>
</html>
Oke kurang lebih seperti itu ya untuk css tricks-nya. Kita akan belajar lebih banyak lagi tentang Css pada artikel-artikel selanjutnya.

Komentar