Cara Membuat Efek Pada Background Dengan CSS

Hai, ketemu lagi dengan saya, kali ini saya akan berbagi tutorial mengenai bagaimanaÂ Cara Membuat Efek Pada Background Dengan CSS, langsung saja, simak langkah-langkah nya berikut ini.

Silahkan kalian buat kode HTML berikut.

<div></div>

Setelah itu, kita buat efek nya dengan kode CSS berikut.

@import "compass/css3";

@import "compass/css3";

$startColor : #FFF;
$stopColor  : #000;

@keyframes animstart {
  0% { @include background-image(radial-gradient($startColor 0%,#000 100%)); }
  10% { @include background-image(radial-gradient($startColor 10%,$stopColor 100%)); }
  20% { @include background-image(radial-gradient($startColor 20%,$stopColor 100%)); }
  30% { @include background-image(radial-gradient($startColor 30%,$stopColor 100%)); }
  40% { @include background-image(radial-gradient($startColor 40%,$stopColor 100%)); }
  50% { @include background-image(radial-gradient($startColor 50%,$stopColor 100%)); }
  60% { @include background-image(radial-gradient($startColor 60%,$stopColor 100%)); }
  70% { @include background-image(radial-gradient($startColor 70%,$stopColor 100%)); }
  80% { @include background-image(radial-gradient($startColor 80%,$stopColor 100%)); }
  90% { @include background-image(radial-gradient($startColor 90%,$stopColor 100%)); }
  100% { @include background-image(radial-gradient($startColor 100%,$stopColor 100%)); }
}

body{
 @include background-image(radial-gradient(#FFF 0%,#000 100%));
 animation:animstart .5s linear 0s infinite alternate both;
}

Kalo sudah semua, simpan dulu, kemudian jalankan di browser masing-masing, dan lihat hasilnya. Selesai

Baik sekian dulu tutorial mengenaiÂ Cara Membuat Efek Pada Background Dengan CSS, semoga bermanfaat.

Selamat mencoba 🙂

Cara Membuat Efek Pada Background Dengan CSS

Kategori