Membuat Animasi Backgroud Gradient Dengan CSS
Jurnalcode.com

Membuat Animasi Backgroud Gradient Dengan CSS


Jurnalcode : Animasi Merupakan hal yang paling menarik untuk diterapkan disebuah website . nah kali ini saya akan membuat sebuah tutorial bagaimana membuat bacground Animasi Gradient dengan CSS HTML .  Sebenarnya untuk Penerapan nya sangatlah simpel . kalian dapat melihat langsung pada kolom di bawah menu yang ada di website jurnalcode . disana kalian akan menemukan transisi background gradient yang sangat smoth . bagaimana cara membuatnya ?  mari kita coba.

Pertama buatlah sebuah script css dengan code berikut  kemudian simpan dengan nama style.css:

body{
  margin: 0;
  padding: 0;
  font-family: "montserrat";
  background-image: linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);
  background-size: 400% 400%;
  animation: bganimation 15s infinite;
}
.text{
  color: white;
  text-align: center;
  text-transform: uppercase;
  margin: 350px 0;
  font-size: 22px;
}

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

 

Selanjutnya untuk penerapan nya kita memerlukan bantuan HTML . dan silahkan buat file html dan isikan code berikut :

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="text">
      Ini adalah Gradient Background Animation jurnnalcode
    </div>
  </body>
</html>

 

Selanjutnya Simpan dengan nama Index.html . nah silahkan Jalankan file index html ini di browser dan lihat hasilnya ..  Selamat mencoba ..

 

 

 

.

Ayo Komentar