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 id="gradient">gradient</h1><p>{</p><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;

}

@-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%}

}

Dalam ini kod:

• Kami menetapkan sifat kedudukan latar belakang dalam bingkai utama untuk menentukan kedudukan permulaan dan penamat kecerunan.
• Kami menggunakan saiz latar belakang untuk menetapkan saiz kecerunan kawasan, yang lebih besar daripada elemen itu sendiri untuk membolehkan pergerakan lancar.
• memudahkan dalam sifat animasi zorgt voor een vloeiende overgang.

Dengan menggunakan prinsip ini, anda boleh mencipta animasi kecerunan yang licin dan menarik secara visual semata-mata melalui CSS, tanpa memerlukan perpustakaan atau rangka kerja JavaScript tambahan.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Animasi Gradien Lancar dalam CSS Menggunakan `background-position`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!