Bagaimanakah Saya Boleh Mencipta Animasi Latar Belakang Gradien Lancar dalam CSS Tanpa Menggunakan Perpustakaan Luaran?

Latar Belakang Kecerunan Menganimasikan Lancar dengan CSS

Jika anda menghadapi masalah dengan animasi kecerunan berombak, di mana ia berubah secara tiba-tiba dan bukannya beralih dengan lancar, artikel ini akan memberikan penyelesaian tanpa bergantung kepada perpustakaan luar seperti jQuery.

Cabaran Animasi

Apabila berurusan dengan animasi kecerunan, ia boleh menjadi mencabar untuk mencapai peralihan yang lancar antara berbilang warna. Tingkah laku animasi lalai selalunya mendadak, menyebabkan kecerunan melompat dari satu kedudukan ke kedudukan yang lain.

Latar Belakang Kecerunan Linear

Untuk mencipta animasi kecerunan yang lancar, kami akan menggunakan latar belakang kecerunan linear dan gunakan animasi CSS untuk mengalihkan kedudukan latar belakang. Gaya CSS kami akan kelihatan seperti ini:

#gradient {
  /* Gradient background properties */
  height: 300px;
  width: 300px;
  border: 1px solid black;
  font-size: 30px;
  background: linear-gradient(
    130deg,
    #ff7e00,
    #ffffff,
    #5cff00
  );
  background-size: 200% 200%;

  /* Animation properties */
  -webkit-animation: Animation 5s ease infinite;
  -moz-animation: Animation 5s ease infinite;
  animation: Animation 5s ease infinite;
}

@-webkit-keyframes Animation {
  0% {
    background-position: 10% 0%;
  }
  50% {
    background-position: 91% 100%;
  }
  100% {
    background-position: 10% 0%;
  }
}

@-moz-keyframes Animation {
  0% {
    background-position: 10% 0%;
  }
  50% {
    background-position: 91% 100%;
  }
  100% {
    background-position: 10% 0%;
  }
}

@keyframes Animation {
  0% {
    background-position: 10% 0%;
  }
  50% {
    background-position: 91% 100%;
  }
  100% {
    background-position: 10% 0%;
  }
}

Implementasi HTML

Dalam HTML, kita perlu mencipta elemen div dan menggunakan kelas "gradient" :

<div>

Dengan memanipulasi kedudukan latar belakang menggunakan animasi CSS, kami boleh mencipta animasi kecerunan bendalir. Pendekatan ini menghapuskan lompatan mendadak dan menghasilkan peralihan yang lancar dan beransur-ansur antara warna.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Animasi Latar Belakang Gradien Lancar dalam CSS Tanpa Menggunakan Perpustakaan Luaran?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!