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.
|
1 |
<div></div> |
Setelah itu, kita buat efek nya dengan kode CSS berikut.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
@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 🙂