CSS를위한 6 가지 창의적인 아이디어 링크 호버 효과

일부 CSS 링크 호버 효과를 일반 웹 페이지에 추가하면 웹 페이지의 시각적 매력이 향상 될 수 있습니다. 쿨 호버 효과를 만드는 데 어려움을 겪고 있다면이 기사에서는 다음 프로젝트에 직접 사용할 수있는 6 가지 CSS 효과를 제공합니다.

시작합시다!

나는 우리가 이야기하고 있다는 것을 알고 있지만, :hover 이지만 때로는 (항상 아닐 수도 있음) 포함하는 것이 좋습니다 :focus 도 마우스에서 직접 나오는 것이 아니라 클릭이나 키 프레스 일 수 있기 때문입니다.

하이라이트 링크 호버 효과를 슬라이드합니다

이 효과는 링크 텍스트의 색상을 변경하면서 인라인 링크에 상자 섀도우를 적용합니다. 먼저 링크에 주변 패딩을 추가 한 다음 패딩이 텍스트 스트림을 깨지 않도록 동일한 값의 음수 마진을 추가합니다.

우리는 background 속성 대신 box-shadow 사용하여 전환을 할 수 있으므로 사용합니다.

 A {
  Box-Shadow : inset 0 0 0 https://www.php.cn/link/93ac0c50ddddc7b88e5fe05c70e15b54b3d6;
  색상 : https://www.php.cn/link/93ac0c50ddc7b88e5fe05c70e15b54b3d6;
  여백 : 0 -.25REM;
  패딩 : 0 .25REM;
  전환 : 색상 .3S 편의-인 아웃, Box-Shadow .3s Ease-in-out;
}
A : 호버 {
  Box-Shadow : 삽입 100px 0 0 0 https://www.php.cn/link/93ac0c50ddddc7b88e5fe05c70e15b54b3d6;
  색상 : 흰색;
}

로그인 후 복사

텍스트 스위치 링크 호버 효과

이것은 링크 된 텍스트를 호버링 할 때 다른 텍스트와 교환 할 수있는 흥미로운 효과입니다. 텍스트 위로 마우스를 가져 가면 링크 텍스트가 미끄러 져 새 텍스트가 미끄러집니다.

데모는 설명보다 이해하기 쉽습니다.

이 링크 호버 효과에는 많은 트릭이 포함되어 있습니다. 그러나 마술은 데이터 속성을 사용하여 텍스트에서 슬라이드를 정의하고 ::after 된 content 속성을 사용하여 호출한다는 것입니다.

먼저 HTML 태그 :

<p> 호버 <a data-replace="get a link" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">링크를 얻으십시오</a></p>

로그인 후 복사

이것은 많은 인라인 태그이지만 링크와 스팬이 포함 된 단락 태그입니다.

링크에 몇 가지 기본 스타일을 추가합시다. 의사 요소를 제자리에 유지하기 위해 상대적 위치를 제공하고, 상자 요소 스타일의 편의를 얻기 위해 인라인 블록으로 표시되고 유사 요소가 유발할 수있는 오버플로를 숨기도록해야합니다.

 A {
  오버플로 : 숨겨진;
  위치 : 상대;
  디스플레이 : 인라인 블록;
}

로그인 후 복사

::before 및 ::after pseudo elements는 실제 링크에 쌓일 수 있도록 절대적인 위치를 가져야합니다. 우리는 그들이 왼쪽 위치 오프셋이 0으로 링크의 전체 너비로 설정되어 일부 슬라이딩 작업을 준비 할 수 있습니다.

 A :: 이전,
A :: 후 {
 콘텐츠: '';
  위치 : 절대;
  너비 : 100%;
  왼쪽 : 0;
}

로그인 후 복사

::after HTML 태그의 링크 데이터 속성에서 컨텐츠를 가져옵니다.

 A :: 후 {
  내용 : attr (data-replace);
}

로그인 후 복사

이제 우리는 transform: translate3d() ::after 하여 pseudo element 200%를 오른쪽으로 이동합니다. 우리는 그것을 원래 위치 :hover 로 다시 옮깁니다. 그건 그렇고, 우리는 상단 방향으로 제로 오프셋을 설정할 수 있습니다. 이것은 텍스트 밑줄처럼 나중에 의사 요소를 사용하기 ::before 사용할 때 매우 중요합니다.

 A :: 후 {
  내용 : attr (data-replace);
  상단 : 0;
  변환-오리진 : 100% 50%;
  변환 : translate3d (200%, 0, 0);
}

A : 호버 :: 후,
A : 초점 :: 후 {
  변환 : translate3d (0, 0, 0);
}

로그인 후 복사

또한 transform: scale() ::before 기본적으로 그것을 숨기고 다시 :hover 할 것입니다. 우리는 높이가 작게 만들어서 2px를 예로 들어 텍스트 밑줄처럼 보이도록 하단에 고정시켜 ::after 로 교체됩니다.

 A :: 이전 {
  배경색 : https://www.php.cn/link/93ac0c50dddc7b88e5fe05c70e15b54b3d6;
  높이 : 2px;
  하단 : 0;
  변환-오리진 : 100% 50%;
  변환 : scalex (0);
}

A : 호버 :: 이전,
A : 초점 :: 이전 {
  변환-오리진 : 0% 50%;
  변환 : scalex (1);
}

로그인 후 복사

나머지는 선호도입니다! 전환 효과, 일부 색상 등에 전환을 추가하여 전체 효과를 얻습니다. 이 값은 전적으로 귀하에게 달려 있습니다.

전체 CSS 코드를 봅니다

``CSS {오버 플로우 : 상대;

a :: {content : 왼쪽; 변환 : scalex (0); att B54B3D6;

A : hover :: transport-origin : 0% 변환;

스팬 {디스플레이 : 인라인-블록;

A : 호버 스팬 {transform : translate3d (-200%, 0, 0);

https://www.php.cn/link/93ac0c550ddddddc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0ddd620dc7b88e5fe05c70e15bhttps://ww.ppycn D620DC7B88E5FE05C70E15B 성장 배경 링크 호버 효과 이것은 여러 곳에서 본 매우 인기있는 효과입니다. 아이디어는 링크의 실제 텍스트보다 약간 뒤떨어져있는 링크의`:: 이전의 의사 요소를 두꺼운 밑줄로 사용하는 것입니다. 그런 다음 호버에서 의사 요소가 확장되어 전체 컨텐츠를 다룹니다.

좋아, 링크의 몇 가지 기본 스타일. `:: prever`은 텍스트 장식으로 작용하고 절대 포지셔닝을 제공 할 때`:: 이전에 제자리에 유지하기위한 상대적인 위치를 따라 텍스트 장식이 필요하지 않습니다.

```CSS
A {
  텍스트 결정 : 없음;
  위치 : 상대;
}

로그인 후 복사

이제 키가 약 8px로 두꺼운 밑줄처럼 보이도록 ::before 하겠습니다. 우리는 또한 절대적인 위치를 제공하여 실제 링크를 오프셋하면서 왼쪽에서 약간 그리고 바닥에서 약간 약간 떨어져 링크를 미묘하게 강조 표시하는 것처럼 보이도록 전체 링크를 제어 할 수 있습니다. z-index: -1 로 설정하여 링크 뒤에 있는지 확인할 수도 있습니다.

 A :: 이전 {
  콘텐츠: '';
  배경색 : HSLA (196, 61%, 58%, .75);
  위치 : 절대;
  왼쪽 : 0;
  하단 : 3px;
  너비 : 100%;
  높이 : 8px;
  Z- 인덱스 : -1;
}

로그인 후 복사

매우 좋은. 링크를 떠날 때 ::before 같은 것처럼 보이도록 봅시다. 높이를 3px에서 100%로 변경하면됩니다. 배경이 자라면서 더 많은 공간을 덮도록 하단 오프셋을 0으로 복원했습니다.

 A : 호버 :: 이전 {
  하단 : 0;
  높이 : 100%;
}

로그인 후 복사

이제 이러한 변경 사항에 약간의 전환을 추가하십시오.

 A :: 이전 {
  콘텐츠: '';
  배경색 : HSLA (196, 61%, 58%, .75);
  위치 : 절대;
  왼쪽 : 0;
  하단 : 3px;
  너비 : 100%;
  높이 : 8px;
  Z- 인덱스 : -1;
  전환 : 모든 .3s의 편안함;
}

로그인 후 복사

전체 CSS 코드를 봅니다

``CSS {텍스트 사용 : https://www.php.cn/93ac0c550dc7b88e5fe15b18272f;

{content : '';

A : Hover :: {하단 : 100%;

https://www.php.cn/link/93ac0c550ddddddc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0ddd620dc7b88e5fe05c70e15bhttps://ww.ppycn D620DC7B88E5FE05C70E15B 컬러 스왑 링크 호버 효과 오른쪽에서 왼쪽으로이 효과를 개인적으로 내비게이션의 링크에서 사용하고 싶습니다. 링크는 밑줄없이 색상으로 시작합니다. 그런 다음 호버에서 새로운 색상이 오른쪽에서 미끄러 져 밑줄이 왼쪽에서 미끄러 져 들어갑니다.

매우 깔끔합니까? 많은 조치가 있으므로 접근성 영향을 고려하고 선호하는 감소 모션 쿼리에 모든 것을 포함하여 운동에 민감한 사람들을 위해 더 미묘한 콘텐츠로 대체 할 수 있습니다.

작동 방식은 다음과 같습니다. 우리는 두 가지 색상 사이의 단단한 정지가있는 링크를위한 선형 배경 그라디언트를 제공합니다.

```CSS
A {
  백그라운드 이미지 : 선형 그레이드 (
    오른쪽으로,
    https://www.php.cn/link/93ac0c50dddddc7b88e5fe05c70e15b54b3d6,
    https://www.php.cn/link/93ac0c50ddddc7b88e5fe05c70e15b54b3d6 50%,
    https://www.php.cn/link/93ac0c550ddddc7b88e5fe05c70e15b000 50%
  );
}

로그인 후 복사

배경을 링크 너비의 두 배나 200%로 설정하여 왼쪽에 완전히 배치합니다. 이런 식으로, 그라디언트의 두 가지 색상 중 하나만 표시되는 것 같습니다.

 A {
  백그라운드 이미지 : 선형 그레이드 (
    오른쪽으로,
    https://www.php.cn/link/93ac0c50dddddc7b88e5fe05c70e15b54b3d6,
    https://www.php.cn/link/93ac0c50ddddc7b88e5fe05c70e15b54b3d6 50%,
    https://www.php.cn/link/93ac0c550ddddc7b88e5fe05c70e15b000 50%
  );
  배경 크기 : 200% 100%;
  배경 위치 : -100%;
}

로그인 후 복사

마법은 우리가 몇 가지 비표준 -webkit- 접두사 속성을 사용할 때 발생합니다. 하나는 텍스트에서 색상을 제거하여 투명하게 만듭니다. 다른 하나는 배경 구배를 텍스트로 클립 시키므로 텍스트는 실제로 배경의 색상 인 것 같습니다.

 A {
  백그라운드 이미지 : 선형 그레이드 (
    오른쪽으로,
    https://www.php.cn/link/93ac0c50dddddc7b88e5fe05c70e15b54b3d6,
    https://www.php.cn/link/93ac0c50ddddc7b88e5fe05c70e15b54b3d6 50%,
    https://www.php.cn/link/93ac0c550ddddc7b88e5fe05c70e15b000 50%
  );
  배경 크기 : 200% 100%;
  배경 위치 : -100%;
  -webkit-background-clip : 텍스트;
  -webkit-text-fill-color : 투명;
}

로그인 후 복사

아직 팔로우? 이제 ::before 사용하여 링크의 유사 분만 코어를 만들어 봅시다. 링크 배경 그라디언트의 숨겨진 부분과 동일한 색상을 제공하고 실제 링크 아래에 위치하여 올바른 text-decoration: underline 처럼 보일 것입니다.

 A : 전 {
  콘텐츠: '';
  배경 : https://www.php.cn/link/93ac0c50dddc7b88e5fe05c70e15b54b3d6;
  디스플레이 : 블록;
  위치 : 절대;
  하단 : -3px;
  왼쪽 : 0;
  너비 : 0;
  높이 : 3px;
}

로그인 후 복사

호버에서 우리는 미끄러 져 ::before 에 넣고 왼쪽에서 입력합니다.

 A : 호버 {
 배경 위치 : 0;
}

로그인 후 복사

이제 이것은 조금 까다로워요. 호버에서, 우리는 pseudo element ::before 연결된 링크 너비의 100%로 링크 된 다음을 설정했습니다. 이것을 링크의 호버에 직접 적용하면 링크 자체를 전체 너비로 만들어 화면 주위로 이동합니다. 죄송합니다!

 A : 호버 :: 이전 {
  너비 : 100%;
}

로그인 후 복사

일을 원활하게 만들기 위해 약간의 전환을 추가하십시오.

 A {
  백그라운드 이미지 : 선형 그레이드 (
    오른쪽으로,
    https://www.php.cn/link/93ac0c50dddddc7b88e5fe05c70e15b54b3d6,
    https://www.php.cn/link/93ac0c50ddddc7b88e5fe05c70e15b54b3d6 50%,
    https://www.php.cn/link/93ac0c550ddddc7b88e5fe05c70e15b000 50%
  );
  배경 크기 : 200% 100%;
  배경 위치 : -100%;
  -webkit-background-clip : 텍스트;
  -webkit-text-fill-color : 투명;
  전환 : 모든 0.3 초의 편안함;
}

로그인 후 복사

전체 CSS 코드를 봅니다

````CSS A {배경 이미지 : 선형 그레이드 (오른쪽, 오른쪽,

54B3d6,

 <code>https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%, https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50%</code>

로그인 후 복사

배경 크기 : -100%;

A : https://www.php.cn/93ac0c50dc7b88e5fe15b54b3d6.

A : 호버 {배경 위치 : 0;

A : Hover :: 이전 {너비 : 100%};

https://www.php.cn/link/93ac0c550ddddddc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0ddd620dc7b88e5fe05c70e15bhttps://ww.ppycn D620DC7B88E5FE05C70E15B RAINBOW UNDERLINE LINK 호버 효과`TEXT-DECORATION-COLOR : RAINBOW '를 사용할 수는 없지만 선형 그라디언트와 배경 매직을 혼합하여 가짜를 사용할 수 있습니다.

먼저 링크의`텍스트-결정 '을 삭제합니다.

```CSS
A {
  텍스트 결정 : 없음;
}

로그인 후 복사

이제 그라디언트입니다. 우리는 동일한 background 속성에 두 개의 선형 그라디언트를 연결합니다. 그라디언트는 호버링 전 초기 색상입니다. 두 번째는 호버의 무지개입니다.

 A {
  배경:
    선형 그레이드 (
      오른쪽으로,
      RGBA (100, 200, 200, 1),
      RGBA (100, 200, 200, 1)
    ),)
    선형 그레이드 (
      오른쪽으로,
      RGBA (255, 0, 0, 1),
      RGBA (255, 0, 180, 1),
      RGBA (0, 100, 200, 1)
  );
}

로그인 후 복사

배경 크기를 3px 높이로 만들어서 밑줄을 긋는 것처럼 보입니다. 초기 그라디언트가 전체 너비와 3px 높이 인 반면 무지개는 너비가 0이되도록 background-size 속성의 두 그라디언트의 크기를 조정할 수 있습니다.

 A {
  배경:
    선형 그레이드 (
      오른쪽으로,
      RGBA (100, 200, 200, 1),
      RGBA (100, 200, 200, 1)
    ),)
    선형 그레이드 (
      오른쪽으로,
      RGBA (255, 0, 0, 1),
      RGBA (255, 0, 180, 1),
      RGBA (0, 100, 200, 1)
  );
  배경 크기 : 100% 3px, 0 3px;
}

로그인 후 복사

이제 배경 구배를 background-position 속성에 동시에 배치하여 첫 번째 그라디언트가 완전히 보이고 무지개가 시야를 벗어날 수 있습니다. 오, 사용하면 배경이 반복되지 않도록합시다.

 A {
  배경:
    선형 그레이드 (
      오른쪽으로,
      RGBA (100, 200, 200, 1),
      RGBA (100, 200, 200, 1)
    ),)
    선형 그레이드 (
      오른쪽으로,
      RGBA (255, 0, 0, 1),
      RGBA (255, 0, 180, 1),
      RGBA (0, 100, 200, 1)
  );
  배경 크기 : 100% 3px, 0 3px;
  배경 위치 : 100%100%, 0 100%;
  배경 반복 : 비 반복;
}

로그인 후 복사

그라디언트 스왑 값을 위해 호버의 background-size 업데이트하겠습니다.

 A : 호버 {
  배경 크기 : 0 3px, 100% 3px;
}

로그인 후 복사

마지막으로 호버가 발생하면 약간의 전환을하십시오.

 A {
  배경:
    선형 그레이드 (
      오른쪽으로,
      RGBA (100, 200, 200, 1),
      RGBA (100, 200, 200, 1)
    ),)
    선형 그레이드 (
      오른쪽으로,
      RGBA (255, 0, 0, 1),
      RGBA (255, 0, 180, 1),
      RGBA (0, 100, 200, 1)
  );
  배경 크기 : 100% 3px, 0 3px;
  배경 위치 : 100%100%, 0 100%;
  배경 반복 : 비 반복;
  전환 : 배경 크기 400ms;
}

로그인 후 복사

바라보다!

밑줄 링크에 의한 호버 효과

Geoff Graham은 실제로 Adam Argyle의 Cool 호버 효과를 최근 분석했을 때이 효과를 도입했습니다. 그의 데모에서 링크 뒤의 배경색은 왼쪽에서 들어가 마우스가 나오면 오른쪽에서 나옵니다.

내 버전은 배경을 밑줄과 비슷하도록 단순화합니다.

 A {
  위치 : 상대;
}

A :: 이전 {
    콘텐츠: '';
    위치 : 절대;
    너비 : 100%;
    높이 : 4px;
    Border-Radius : 4px;
    배경색 : https://www.php.cn/link/93ac0c50dddc7b88e5fe05c70e15b18272f;
    하단 : 0;
    왼쪽 : 0;
    변환-오리진 : 맞습니다.
    변환 : scalex (0);
    전환 : .3s의 편안함을 변환합니다.
  }

A : 호버 :: 이전 {
  변환-오리진 : 왼쪽;
  변환 : scalex (1);
}

로그인 후 복사

이것이 이것을 달성하는 유일한 방법은 아닙니다! Justin Wong이 배경을 사용하는 또 다른 방법은 다음과 같습니다.

Geoff는 또한 깔끔한 것에서 완전히 어리석은 것에 이르기까지 다양한 CSS 링크 호버 효과를 제공합니다. 볼만한 가치가 있습니다! 링크 및 버튼 스타일의 유용한 콘텐츠는 DigitalOcean에 대한 Philip Zastrow의 자습서를 확인하십시오.