Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mencipta Isian Warna Latar Belakang Kiri-ke-kanan pada Hover Menggunakan CSS?

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

DDD
DDDasal
2024-11-01 11:23:13830semak imbas

How to Create a Left-to-Right Background Color Fill on Hover Using 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn