CSS 클립 경로와 JavaScript를 사용하여 반전된 텍스트 색상 호버 효과를 얻는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS 클립 경로와 JavaScript를 사용하여 반전된 텍스트 색상 호버 효과를 얻는 방법은 무엇입니까?

Barbara Streisand

풀어 주다： 2024-10-28 03:51:30

원래의

868명이 탐색했습니다.

How to Achieve an Inverted Text Color Hover Effect Using CSS Clip-paths and JavaScript?

CSS 및 JavaScript를 사용하여 마우스 오버 시 텍스트 색상 반전

원하는 호버 효과를 얻으려면 검은색 커서가 나타나면 CSS 클립 경로의 기능과 JavaScript 이벤트 처리를 결합할 수 있습니다.

이 접근 방식은 기본 텍스트 레이어와 반전된 텍스트 레이어라는 두 개의 텍스트 레이어를 만드는 것으로 구성됩니다. 반전된 텍스트 레이어는 기본 텍스트 레이어 뒤에 위치하며 텍스트 색상은 흰색으로 설정되어 있습니다.

JavaScript를 사용하여 마우스 움직임을 캡처하고 반전된 텍스트 레이어의 클립 경로를 동적으로 조정합니다. 마우스를 움직이면 반전된 텍스트가 더 많이 표시되도록 클립 경로가 조정되어 기본 텍스트의 색상이 반전되는 듯한 느낌을 줍니다.

다음은 핵심 코드 구성 요소에 대한 분석입니다.

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

로그인 후 복사

예제 코드:

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

로그인 후 복사

결과:

"WORK" 텍스트 위로 마우스를 가져가면 검은색 텍스트는 마우스 커서가 움직일 때 점차 흰색으로 변합니다.

위 내용은 CSS 클립 경로와 JavaScript를 사용하여 반전된 텍스트 색상 호버 효과를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!