Cara Membuat Animasi Css Gradient Warna Otomatis - Tutorial ini saya dapatkan setelah saya mengunjungi blog milik mbak Arlina. Saya melihat topmenu websitenya menggunakan animasi pergantian warna yang sangat halus. Setelah saya pelajari, akhirnya saya bisa mengetahui triknya.
Langkah kedua, masukkan lagi css berikut ini :
Inti dari Css ini adalah pada penggunaan @keyframes dan atribut background:linier-gradient (bla..bla..bla).
Jadi, kreasikan sendiri buatanmu ya?
Cara Membuat Animasi Css Gradient Warna Otomatis
Pertama, kamu harus membuat Css Keyframe. Contohnya berikut ini :
@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}Langkah kedua, masukkan lagi css berikut ini :
.css-gradient {background: #f24a4a;
background: linear-gradient(-50deg,#ee5952,#ea3a7e,#20aadb,#23e0b3);
background-size: 320% 200%;
animation: Gradient 15s ease infinite;
display: block;
height: 55px;
line-height: 55px;}Inti dari Css ini adalah pada penggunaan @keyframes dan atribut background:linier-gradient (bla..bla..bla).
Jadi, kreasikan sendiri buatanmu ya?