عكس لون النص عند تحريك الماوس

يوضح ملف GIF هذا التأثير المطلوب:

[صورة GIF للنص يتحول إلى اللون الأبيض تحوم الماوس

من الممكن إنشاء هذا التأثير باستخدام CSS وJS. تتضمن إحدى الطرق معالجة مسار المقطع لطبقة نص مكررة للكشف عن اللون المقلوب عند التمرير.

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%));
}

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');
}

عندما يتحرك الماوس، يقوم البرنامج النصي بضبط مسار المقطع ليكشف المزيد من النص المقلوب، مما يؤدي إلى إنشاء تأثير التحويم.