Bagaimana untuk Mencipta Isian Warna Latar Belakang Kiri-ke-kanan pada Hover Menggunakan CSS?

Mencapai Isian Warna Latar Belakang Kiri-ke-kanan pada Tuding Menggunakan CSS

Untuk mencapai isian warna latar belakang dari kiri ke kanan semasa melayang ke atas unsur, menggunakan kecerunan dan peralihan linear. Mulakan dengan mengkonfigurasi kecerunan linear dengan dua warna, contohnya, merah dan biru, pada tanda 50%. Kemudian, tetapkan kecerunan untuk diletakkan di sebelah kanan dan dua kali ganda saiz elemen, berbanding lebar dan tingginya (cth., 200%).

Apabila elemen dilegarkan, ubah kedudukan latar belakang kepada "kiri". Menggabungkan "peralihan: semua 2s mudah;" untuk menggunakan peralihan yang lancar.

Untuk penyemak imbas yang memerlukan awalan vendor, rujuk ulasan di bawah soalan awal.

Penyesuaian Tambahan

Untuk mencipta peralihan warna, tingkatkan lebar kecerunan kepada 300% dan laraskan permulaan (cth., 34%) dan tamat (cth., 65%) kedudukan sewajarnya.

Contoh:

<code class="css">div {
  font: 22px Arial;
  display: inline-block;
  padding: 1em 2em;
  text-align: center;
  color: white;
  background: red; /* default color */

  /* Linear gradient and initial position */
  background: linear-gradient(to left, salmon 50%, lightblue 50%) right;
  background-size: 200%;
  transition: .5s ease-out;
}
div:hover {
  background-position: left;
}</code>

HTML:

<code class="html"><div>Hover me</div></code>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Isian Warna Latar Belakang Kiri-ke-kanan pada Hover Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!