Bagaimana untuk Mencapai Animasi Gradien Lancar dalam CSS Menggunakan `background-position`?

Cara Menghidupkan Kecerunan Dengan Lancar Menggunakan CSS

Menghidupkan kecerunan dalam CSS boleh menjadi rumit, terutamanya jika anda ingin mencapai peralihan yang lancar. Satu pendekatan yang menghasilkan hasil yang tidak konsisten melibatkan mengubah kedudukan kecerunan secara tiba-tiba.

Pertimbangkan kod berikut:

.animasi {
lebar: 300px;
tinggi: 300px;
jidar: 1px hitam pepejal;
animasi: gra 5s tak terhingga;
animasi-arah: terbalik;
-webkit-animasi: gra 5s tak terhingga;
-arah-animasi-webkit: terbalik;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}

@keyframes gra {
0% {

background: linear-gradient(135deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%);

}
50% {

background: linear-gradient(135deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%);

}
100% {

background: linear-gradient(135deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%);

}
}

Kod ini mencipta animasi kecerunan, tetapi ia mengubah kedudukannya secara tiba-tiba, menghasilkan kesan berombak. Untuk menyelesaikan isu ini, kami boleh menggunakan sifat kedudukan latar belakang dalam bingkai utama untuk mengalihkan kecerunan dengan lancar.

Berikut ialah kod CSS yang dipertingkatkan yang mencapai animasi kecerunan yang lancar:

< ;div class="snippet-code">

<h1>gradient</h1><p>{</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">height:300px;
width:300px;
border:1px solid black;
font-size:30px;
background: linear-gradient(130deg, #ff7e00, #ffffff, #5cff00);
background-size: 200% 200%;

-webkit-animation: Animation 5s ease infinite;
-moz-animation: Animation 5s ease infinite;
animation: Animation 5s ease infinite;

Salin selepas log masuk

}

@-webkit-keyframes Animasi {

0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}

}
@-moz-keyframes Animasi {

0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}

}
@keyframes Animasi {

0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}

}