Bagaimana untuk Mencapai Kesan Hover Warna Teks Terbalik Menggunakan Laluan Klip CSS dan JavaScript?

Terbalikkan Warna Teks pada Tuding Tetikus Menggunakan CSS dan JavaScript

Untuk mencapai kesan tuding yang diingini, di mana teks hitam bertukar menjadi putih sambil mengekalkan penampilan kursor hitam, kita boleh menggabungkan keupayaan laluan klip CSS dengan pengendalian acara JavaScript.

Pendekatannya terdiri daripada mencipta dua lapisan teks: lapisan teks utama dan lapisan teks terbalik. Lapisan teks terbalik diletakkan di belakang lapisan teks utama dan warna teksnya ditetapkan kepada putih.

Menggunakan JavaScript, kami menangkap pergerakan tetikus dan melaraskan laluan klip lapisan teks terbalik secara dinamik. Semasa tetikus bergerak, laluan klip dilaraskan untuk mendedahkan lebih banyak teks terbalik, mewujudkan ilusi teks utama yang menyongsangkan warnanya.

Berikut ialah pecahan komponen kod utama:

<code class="css">/* Primary Text Layer */
h1 {
  color: #000;
  position: relative;
}

/* Inverted Text Layer */
h1:before {
  position: absolute;
  content: attr(data-text); /* Same text as primary layer */
  color: #fff;
  background: #000;
  clip-path: circle(0 at var(--x, -100%) var(--y, -100%)); /* Dynamic Clip-path */
}

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

<code class="javascript">// Event Listener for Mouse Movement
document.body.onmousemove = function(e) {
  // Update cursor position
  cursor.style.left = e.clientX + 'px';
  cursor.style.top = e.clientY + 'px';

  // Update clip-path of inverted layer based on mouse position
  h1.style.setProperty('--x', (e.clientX - p.top) + 'px');
  h1.style.setProperty('--y', (e.clientY - p.left) + 'px');
};</code>

Contoh Kod:

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

Hasil:

Apabila anda menuding pada teks "KERJA", teks hitam secara beransur-ansur akan beralih kepada putih apabila kursor tetikus bergerak.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Kesan Hover Warna Teks Terbalik Menggunakan Laluan Klip CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!