CSS 및 JavaScript를 사용하여 마우스를 올리면 반전된 텍스트 색상 효과를 만드는 방법은 무엇입니까?

마우스를 올리면 텍스트 색상 반전

검은색 커서로 텍스트 요소 위에 마우스를 올리면 텍스트 요소의 색상이 반전됩니다. 효과는 다음 GIF와 유사해야 합니다.

[효과를 보여주는 GIF]

CSS와 JavaScript로 이 효과를 얻기 위해 다음 기술 조합을 사용합니다.

1. 복제 텍스트 레이어 만들기: 텍스트 요소를 복제하여 원본 바로 위에 배치합니다. 중복된 텍스트 레이어의 색상을 흰색으로 반전합니다.
2. 클립 경로를 사용하여 최상위 레이어 표시: 클립 경로를 사용하여 반전된 텍스트 레이어를 표시할 원형 영역을 정의합니다. .
3. 마우스 움직임 듣기: 사용자가 텍스트 위로 커서를 이동할 때 클립 경로의 위치를 ​​커서의 움직임과 일치하도록 조정합니다.

여기 구현 예:

<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>

이러한 기술을 결합하여 마우스 오버 시 원하는 텍스트 색상 반전 효과를 만들 수 있습니다.

위 내용은 CSS 및 JavaScript를 사용하여 마우스를 올리면 반전된 텍스트 색상 효과를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!