Animated Gradient Background Html Css

MUAZHAN

4 min read

·

Jun 28, 2024

37

Share

Membangun Animated Gradient Background dengan HTML & CSS

Artikel ini akan memandu Anda dalam membuat background website yang dinamis dan menarik dengan menggunakan animasi gradient dalam HTML & CSS.

Konsep Dasar

Animasi gradient di HTML & CSS dicapai dengan menggabungkan elemen-elemen berikut:

• HTML: Menyediakan struktur dasar untuk background website
• CSS: Menentukan style dan animasi gradient

Langkah-langkah:

1. Buat struktur HTML dasar:

2. Tentukan style gradient di CSS:

   body {
       background: linear-gradient(to right, #ff0000, #ffff00);
       animation: gradientAnimation 10s linear infinite;
   }
   
   @keyframes gradientAnimation {
       0% {
           background-position: 0% 50%;
       }
       50% {
           background-position: 100% 50%;
       }
       100% {
           background-position: 0% 50%;
       }
   }
   

   Penjelasan:

   • body: Menentukan style untuk seluruh badan website
   • background: linear-gradient(to right, #ff0000, #ffff00);: Membuat gradient linear dari warna merah (#ff0000) ke kuning (#ffff00) dengan arah ke kanan.
   • animation: gradientAnimation 10s linear infinite;: Menerapkan animasi bernama gradientAnimation dengan durasi 10 detik, jenis animasi linear, dan diulang secara tak terbatas (infinite).
   • @keyframes gradientAnimation: Mendefinisikan animasi gradientAnimation dengan beberapa keyframe:
     • 0%: Posisi awal gradient
     • 50%: Gradient bergerak ke kanan
     • 100%: Gradient kembali ke posisi awal

3. Sesuaikan warna dan animasi:

   • Warna: Gunakan kombinasi warna yang Anda inginkan. Anda dapat menggunakan hsl() atau rgb() untuk mengatur warna secara lebih presisi.
   • Arah gradient: Anda dapat menggunakan to top, to bottom, to left, to right, to top left, to top right, to bottom left, to bottom right untuk mengatur arah gradient.
   • Durasi animasi: Ubah nilai 10s untuk mengatur kecepatan animasi.
   • Jenis animasi: Anda dapat menggunakan ease, ease-in, ease-out, ease-in-out, linear untuk menentukan jenis animasi yang halus.
   • Keyframe: Sesuaikan keyframe untuk menciptakan efek animasi yang lebih kompleks.

Contoh Animasi Lainnya:

Animasi Pergerakan Diagonal:

body {
    background: linear-gradient(to top right, #ff0000, #ffff00);
    animation: diagonalGradientAnimation 10s linear infinite;
}

@keyframes diagonalGradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 50%;
    }
}

Animasi Putar:

body {
    background: linear-gradient(to right, #ff0000, #ffff00);
    animation: rotateGradientAnimation 10s linear infinite;
}

@keyframes rotateGradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

Animasi Berputar dan Bergerak:

body {
    background: linear-gradient(to right, #ff0000, #ffff00);
    animation: spinAndMoveGradientAnimation 10s linear infinite;
}

@keyframes spinAndMoveGradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
        transform: rotate(180deg);
    }
    100% {
        background-position: 0% 50%;
        transform: rotate(360deg);
    }
}

Kesimpulan:

Dengan menggunakan CSS dan HTML, Anda dapat membuat animasi gradient yang menarik dan dinamis untuk background website Anda. Anda dapat menyesuaikan warna, arah, durasi, dan keyframe untuk menciptakan efek animasi yang unik sesuai dengan kebutuhan Anda.