Cara Membuat Animasi Css Gradient Warna Otomatis

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.

Cara Membuat Animasi Css Gradient Warna Otomatis

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?

Tampilkan Komentar

Mohon untuk menggunakan bahasa yang baik dan benar.
EmoticonEmoticon