Bagaimana untuk mencipta kesan warna teks terbalik pada hover tetikus dengan CSS dan JavaScript?

Terbalikkan Warna Teks pada Tuding Tetikus

Matlamatnya ialah untuk menyongsangkan warna elemen teks sambil melayang di atasnya dengan kursor hitam. Kesannya hendaklah serupa dengan GIF berikut:

[GIF menunjukkan kesan]

Untuk mencapai kesan ini dengan CSS dan JavaScript, kami akan menggunakan gabungan teknik:

1. Buat lapisan teks pendua: Salin elemen teks dan letakkannya terus di atas yang asal. Terbalikkan warna lapisan teks pendua kepada putih.
2. Gunakan laluan klip untuk mendedahkan lapisan atas: Gunakan laluan klip untuk menentukan kawasan bulat yang akan mendedahkan lapisan teks terbalik .
3. Dengar pergerakan tetikus: Apabila pengguna menggerakkan kursor ke atas teks, laraskan kedudukan laluan klip agar sepadan dengan pergerakan kursor.

Ini contoh pelaksanaan:

<code class="javascript">var h = document.querySelector('h1');
var p = h.getBoundingClientRect();
var c = document.querySelector('.cursor');

document.body.onmousemove = function(e) {
  // Adjust the cursor position
  c.style.left = e.clientX + 'px';
  c.style.top = e.clientY + 'px';

  // Adjust the clip-path
  h.style.setProperty('--x', (e.clientX - p.top) + 'px');
  h.style.setProperty('--y', (e.clientY - p.left) + 'px');
};</code>

<code class="css">body {
  cursor: none;
}

h1 {
  color: #000;
  display: inline-block;
  margin: 50px;
  text-align: center;
  position: relative;
}

h1:before {
  position: absolute;
  content: attr(data-text);
  color: #fff;
  background: #000;
  clip-path: circle(20px at var(--x, -100%) var(--y, -100%));
}

.cursor {
  position: fixed;
  width: 40px;
  height: 40px;
  background: #000;
  border-radius: 50%;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  z-index: -2;
}</code>

<code class="html"><h1 data-text="WORK">WORK</h1>

<span class="cursor"></span></code>

Dengan menggabungkan teknik ini, kita boleh mencipta kesan penyongsangan warna teks yang diingini pada tuding tetikus.

Atas ialah kandungan terperinci Bagaimana untuk mencipta kesan warna teks terbalik pada hover tetikus dengan CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!