호버의 텍스트 링크 색상을 애니메이션하는 4 가지 방법

간단한 색상 스왑을 피하면서 호버의 텍스트 링크에 ​​대한 부드러운 색상 전환을 만들기 위해 4 가지 CSS 기술을 살펴 보겠습니다. 접근성, 성능 및 광범위한 브라우저 호환성을 우선시합니다.

방법 1 : background-clip: text

현재 background-clip: text 는 실험적이며 이전 브라우저 (IE11 이하)에서 지원이 부족합니다. 이 방법은 그라디언트를 사용하여 텍스트로 클립합니다.

HTML은 간단합니다 : <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Link Hover</a>

CSS에는 overflow: hidden , background-clip , background-size 및 background-position 조작을위한 전환을 제어하는 ​​것이 포함됩니다.

 A {
  위치 : 상대;
  디스플레이 : 인라인 블록;
  글꼴 크기 : 2EM;
  글꼴 중량 : 800;
  색상 : RoyalBlue;
  오버플로 : 숨겨진;
  배경 : 선형 등급 (오른쪽, 자정 블루, Midnightblue 50%, RoyalBlue 50%);
  배경 클립 : 텍스트;
  -webkit-background-clip : 텍스트; / * 이전 웹 키트 브라우저의 경우 */
  -webkit-text-fill-color : 투명;
  배경 크기 : 200% 100%;
  배경 위치 : 100%;
  전환 : 배경 위치 275ms 용이성;
}
A : 호버 {
  배경 위치 : 0 100%;
}

단점 : 사파리와 크롬은 텍스트 장식을자를 수 있습니다 (밑줄과 같은).

방법 2 : width / height 조작

이 접근법은 data 속성과 pseudo element ::before 데이터 속성을 활용하여 효과를 만듭니다. 텍스트 장식은 여기에서 올바르게 작동합니다.

HTML : <a data-content="Link Hover" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Link Hover</a>

CSS : 색상 공개를 제어하기 위해 의사 요소의 너비 (또는 높이)를 관리합니다.

 A {
  위치 : 상대;
  디스플레이 : 인라인 블록;
  글꼴 크기 : 2EM;
  색상 : RoyalBlue;
  글꼴 중량 : 800;
  텍스트 결정 : 밑줄;
  오버플로 : 숨겨진;
}
A :: 이전 {
  위치 : 절대;
  내용 : attr (데이터 콘텐츠);
  상단 : 0;
  왼쪽 : 0;
  색상 : Midnightblue;
  텍스트 결정 : 밑줄;
  오버플로 : 숨겨진;
  너비 : 0;
  흰색 공간 : Nowrap;
  전환 : 너비 275ms 편의;
}
A : 호버 :: 이전 {
  너비 : 100%;
}

그러나 width 또는 height 사용한 전환은 transform 또는 opacity 사용하는 것보다 성능이 떨어집니다.

방법 3 : clip-path

이 방법은 다각형 모양의 clip-path 속성을 사용하여 호버의 다각형 정점을 동적으로 조정합니다.

HTML은 방법 2와 동일하게 유지됩니다. CSS는 pseudo element ::before 사용하고 clip-path 속성을 조작합니다.

 A :: 이전 {
  위치 : 절대;
  내용 : attr (데이터 콘텐츠);
  색상 : Midnightblue;
  텍스트 결정 : 밑줄;
  클립 경로 : 다각형 (0 0, 0 0, 0%100%, 0 100%);
  전환 : 클립 경로 275ms 용이성;
}
A : 호버 :: 이전 {
  클립 경로 : 다각형 (0 0, 100% 0, 100% 100%, 0 100%);
}

clip-path 에 대한 브라우저 지원은 다양 하며이 방법은 브라우저 페인트 성능에 영향을 줄 수 있습니다.

방법 4 : transform: translateX()

이 기술은 a와 함께 마스킹 방식을 사용합니다<span></span> Pseudo Element ::before aria-hidden="true" 로 접근성을 향상시킵니다.

HTML : Link Hover

CSS : transform: translateX() 사용하여 마스크 된 요소를보기로 밀어 넣습니다.

 기간 {
  위치 : 절대;
  상단 : 0;
  왼쪽 : 0;
  오버플로 : 숨겨진;
  변환 : translatex (-100%);
  전환 : 275ms 편의를 변환;
}
스팬 :: 이전 {
  디스플레이 : 인라인 블록;
  내용 : attr (데이터 콘텐츠); / * 데이터 콘텐츠가 <a>태그에 추가되었다고 가정합니다 */
  색상 : Midnightblue;
  변환 : TranslateX (100%);
  전환 : 275ms 편의를 변환;
  텍스트 결정 : 밑줄;
}
A : 호버 스팬, A : 호버 스팬 :: 이전 {
  변환 : translatex (0);
}</a><p> 이 방법은 <code>transform</code> 사용으로 인해 우수한 브라우저 호환성 및 성능을 제공합니다. 그러나 약간 더 많은 마크 업이 필요합니다.</p><p> 각 기술은 호버의 애니메이션 색상 변화를 달성하기위한 독특한 접근 방식을 제공합니다. 최선의 선택은 브라우저 지원 및 성능에 관한 특정 요구 사항과 우선 순위에 따라 다릅니다.</p>

위 내용은 호버의 텍스트 링크 색상을 애니메이션하는 4 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!