CSS 텍스트 섀도우를 사용하는 4 개의 쿨 호버 효과

이전 기사에서는 CSS 배경 특성을 사용하여 쿨 호버 효과를 만드는 방법에 대해 논의했습니다. 이번에는 CSS text-shadow 속성에 중점을두고 더 흥미로운 호버 효과를 탐색 할 것입니다. 텍스트에 그림자를 추가하는 것이 어떻게 멋진 효과를 가져올 수 있는지 궁금 할 수도 있지만 요점은 다음과 같습니다. 우리는 실제로 이러한 텍스트 호버 효과에 대한 그림자를 만들지 않습니다.

쿨 호버 효과 시리즈 :

1. 배경 속성을 사용하여 냉각 호버 효과를 달성하십시오
2. CSS 텍스트 섀도우를 사용하여 쿨 호버 효과를 얻으십시오 (현재 위치!)
3. 배경 자르기, 마스킹 및 3D를 사용하여 시원한 호버 효과를 달성하십시오.

text-shadow 이지만 텍스트 그림자가 없습니까?

다음 데모에서 구축 할 호버 효과로 혼란을 제거하겠습니다.

코드를 보지 않으면 서 많은 사람들이 각 호버 효과에 대해 텍스트를 복사하고 독립적으로 애니메이션한다고 직관적으로 생각할 것입니다. 이제 코드를 보면 HTML의 텍스트가 실제로 복사되지 않음을 알 수 있습니다. CSS에서 content: "text" 알아 차렸습니까?

텍스트 레이어는 전적으로 text-shadow 와 함께 생성됩니다!

호버 효과 #1

CSS 코드를 분류합시다.

 .hover-1 {
  라인 높이 : 1.2em;
  색상 : #0000;
  Text-Shadow : 
    0 #000, 
    0 1.2em #1095c1;
  오버플로 : 숨겨진;
  전환 : .3S;
}
.hover-1 : 호버 {
  Text-Shadow : 
    0-1.2em #000, 
    0 #1095C1;
}

가장 먼저 주목해야 할 것은 실제 텍스트를 숨기려면 실제 텍스트의 색상이 투명하게 설정되어 있습니다 ( #0000 사용). 그 후, 나는 text-shadow 사용하여 두 개의 그림자를 만듭니다. 각 그림은 두 개의 길이 값 만 정의합니다. 이는 블러 반경이 없기 때문에 지정된 색상의 텍스트 사본을 효과적으로 생성하는 명확하고 날카로운 그림자가 나타납니다.

그렇기 때문에 소개에서 그림자가 없다고 주장했습니다. 우리가하는 일은 텍스트를 복사하는 쉬운 방법만큼“고전적인”그림자가 아닙니다.

호버링 할 때 움직일 두 개의 텍스트 레이어가 있습니다. 오버플로를 숨기면 중복 텍스트가 보이지 않으며 이동하면 실제 텍스트가 다른 텍스트로 대체 된 것처럼 보입니다. 이것은이 기사의 모든 예제를 올바르게 작동시키는 주요 트릭입니다.

코드를 최적화합시다. 그림자의 높이와 오프셋을 정의하기 위해 1.2em 값을 여러 번 사용하여 CSS 사용자 정의 속성에 이상적인 후보가되었습니다 ( --h 라고합니다).

 .hover-1 {
  -H : 1.2EM;

  라인 높이 : var (-h);
  색상 : #0000;
  Text-Shadow : 
    0 #000, 
    0 var (-h) #1095c1;
  오버플로 : 숨겨진;
  전환 : .3S;
}
.hover-1 : 호버 {
  Text-Shadow : 
    0 calc (-1 * var (-h)) #000, 
    0 #1095C1;
}

또한 더 많은 calc() 계산을 사용하여 코드를 더욱 단순화하여 text-shadow 한 번만 사용하도록 할 수 있습니다. (우리는 이전 게시물에서 똑같은 일을했습니다.)

 .hover-1 {
  -H : 1.2EM;   

  라인 높이 : var (-h);
  색상 : #0000;
  Text-Shadow : 
    0 calc (-1*var (-_ t, 0em)) #000, 
    0 calc (var (-h)-var (-_ t, 0em)) #1095c1;
  오버플로 : 숨겨진;
  전환 : .3S;
}
.hover-1 : 호버 {
  --_ t : var (-h);
}

왜 --_t 변수에 밑줄을 추가하는지 궁금하다면, 이것은 최적화 목적으로 만 사용되고 변경 될 필요가없는 내부 변수 (예 : --h --_t )에서 사용자가 업데이트 할 수있는 변수 (예 : - -h)를 구별하는 데 사용하는 명명 규칙 일뿐입니다. 다시 말해, 밑줄은 변수 이름의 일부이며 특별한 의미가 없습니다.

또한 중복 텍스트가 상단에서 미끄러지는 반대 효과를 얻기 위해 코드를 업데이트 할 수 있습니다.

우리는 text-shadow 속성에 대한 작은 업데이트 만 만들었습니다. 우리는 다른 것을 만지지 않았습니다!

호버 효과 #2

이 효과를 위해, 우리는 두 가지 속성, 즉 text-shadow 와 background 애니메이션 할 것입니다. text-shadow 와 관련하여 우리는 여전히 이전 예제와 같은 두 개의 레이어를 가지고 있지만 이번에는 스왑 중에 다른 레이어의 색상을 투명하게 설정하면서 그 중 하나만 움직입니다.

 .hover-2 {
  /* 높은*/
  -H : 1.2EM;

  라인 높이 : var (-h);
  색상 : #0000;
  Text-Shadow : 
    0 var (-_ t, var (-h)) #fff,
    0 0 var (-_ c, #000);
  전환 : 0.3S;
}
.hover-2 : 호버 {
  --_ t : 0;
  --_ c : #0000;
}

호버에서는 흰색 텍스트 레이어를 상단으로 이동하면서 다른 레이어의 색상을 투명하게 변경합니다. 이를 위해 그라디언트에 적용되는 background-size 애니메이션을 추가했습니다.

마지막으로, 우리는 overflow: hidden

 .hover-2 {
  /* 높은*/
  -H : 1.2EM;

  라인 높이 : var (-h);
  색상 : #0000;
  Text-Shadow : 
    0 var (-_ t, var (-h)) #ffff,
    0 0 var (-_ c, #000);
  배경: 
    선형 그레이드 (#1095c1 0 0) 
    하단/100% var (-_ d, 0) 반복되지 않음;
  오버플로 : 숨겨진;
  전환 : 0.3S;
}
.hover-2 : 호버 {
  --_ d : 100%;
  --_ t : 0;
  --_ c : #0000;
}

우리가 여기서하는 일은 CSS text-shadow 와 background 속성을 결합하여 쿨 호버 효과를 만드는 것입니다. 또한 CSS 변수를 사용하여 코드를 최적화 할 수 있습니다.

배경 문법이 이상하게 보이면 이전 게시물을 읽는 것이 좋습니다. 다음 호버 효과는 해당 게시물에 자세히 설명한 애니메이션에도 의존합니다. CSS 배경 기술에 익숙하지 않는 한,이 기사를 계속 읽기 전에 더 많은 배경 정보에 대해서는 해당 기사를 읽으십시오.

이전 게시물에서 하나의 변수 만 사용하여 호버 효과를 만드는 방법을 보여주었습니다. 여기서 그렇게 할 수 있습니까?

예, 물론! 우리는 실제로 동일한 건식 스위칭 기술을 사용하여 호버링시 값 만 전환하는 CSS 사용자 정의 속성 만 처리하면됩니다.

 .hover-2 {
  /* 높은*/
  -H : 1.2EM;

  라인 높이 : var (-h);
  색상 : #0000;
  Text-Shadow : 
    0 var (-_ i, var (-h)) #fff,
    0 rgb (0 0 0 / calc (var (-_ i, 1) * 100%);
  배경: 
    선형 그레이드 (#1095c1 0 0) 
    바닥/100% calc (100%-var (-_ i, 1) * 100%) 비 반복;
  오버플로 : 숨겨진;
  전환 : 0.3S;
}
.hover-2 : 호버 {
  --_ i : 0;
}

호버 효과 #3

이 호버 효과는 우리가 한 두 가지 효과의 조합에 지나지 않습니다. 이전 게시물의 두 번째 호버 효과 와이 게시물의 첫 번째 호버 효과.

 .hover-3 {
  /* 색상*/
  ---C : #1095C1;
  /* 높은*/
  -H : 1.2EM;

  /*이 기사의 첫 번째 호버 효과*/
  라인 높이 : var (-h);  
  색상 : #0000;
  오버플로 : 숨겨진;
  Text-Shadow : 
    0 calc (-1 * var (-_ t, 0em)) var (-c), 
    0 calc (var (-h)-var (-_ t, 0em)) #fff;
  /* 이전 게시물의 두 번째 호버 효과*/
  배경: 
    선형 그레이드 (var (-c) 0 0) 비 반복 
    calc (200%-var (-_ p, 0%)) 100% / 200% var (-_ p, .08em);
  전환 : .3S var (-_ s, 0s), 배경 위치 .3s calc (.3s- var (-_ s, 0s));
}
.hover-3 : 호버 {
  --_ t : var (-h);
  --_ p : 100%;
  --_ S : .3S
}

내가 한 것은 다른 예제의 효과를 복사하여 붙여 넣고 약간의 조정을 변수 이름으로 만들었습니다. 그들이 결합되면 깨끗한 호버 효과를 만듭니다! 언뜻보기 에이 효과는 복잡하고 달성하기 어려워 보일 수 있지만 결국에는 두 가지 간단한 효과를 하나로 결합합니다.

완료 한 이전 최적화를 고려하면 건식 토글 변수 기술을 사용하여 코드를 최적화하는 간단한 작업이어야합니다.

 .hover-3 {
  /* 색상*/
  ---C : #1095C1;
  /* 높은*/
  -H : 1.2EM;

  라인 높이 : var (-h);  
  색상 : #0000;
  오버플로 : 숨겨진;
  Text-Shadow : 
    0 calc (-1 * var (-h) * var (-_ i, 0)) var (-c), 
    0 calc (var (-h) * (1- var (-_ i, 0)) #fff;
  배경: 
    선형 그레이드 (var (-c) 0 0) 비 반복
    calc (200%-var (-_ i, 0) * 100%) 100% / 200% calc (100% * var (-_ i, 0) .08EM);
  전환 : .3S calc (var (-_ i, 0) * .3s), 배경 위치 .3s calc (.3s-calc (var (-_ i, 0) * .3s));
}
.hover-3 : 호버 {
  --_ i : 1;
}

호버 효과 #4

이 호버 효과는 두 번째 호버 효과의 개선입니다. 먼저, clip-path 애니메이션을 소개하여 텍스트 레이어 중 하나를 표시 한 다음 이동하겠습니다.

다음은 무슨 일이 일어나고 있는지 더 잘 이해하기위한 더 나은 설명입니다.

처음에는 실제 텍스트 만 볼 수 있기 때문에 overflow: hidden 과 유사한 inset(0 0 0 0) 사용했습니다. 호버에서는 하단에 배치 된 텍스트 레이어를 표시하기 위해 높이와 동일한 음수 값으로 세 번째 값 (하단 오프셋을 나타냄)을 업데이트합니다.

거기에서 우리는 이것을이 기사에서 우리가 만든 두 번째 호버 효과에 추가 할 수 있으며, 다음은 다음과 같습니다.

우리는 점점 가까워지고 있습니다! clip-path 애니메이션을 먼저 실행 한 다음 다른 모든 것을 실행해야합니다. 이를 위해 clip-path 제외하고 호버의 모든 속성에 지연을 추가 할 수 있습니다.

 전환 : 0.4S 0.4S, 클립 경로 0.4S;

마우스가 꺼내면 반대쪽으로 수행합니다.

 전환 : 0.4S, 클립 경로 0.4S 0.4S;

마지막 터치는 box-shadow 추가하여 파란색 사각형의 슬라이딩 효과를 만드는 것입니다. 불행히도 배경은 기본적으로 콘텐츠 영역으로 자르기 때문에 background 이 효과를 생성하지 않습니다. 동시에 box-shadow 콘텐츠 영역을 넘어 갈 수 있습니다.

 .hover-4 {
  /* 색상*/
  ---C : #1095C1;
  /* 높은*/
  -H : 1.2EM;

  라인 높이 : var (-h);
  색상 : #0000;
  Text-Shadow : 
    0 var (-_ t, var (-h)) #fff,
    0 0 var (-_ c, #000);
  Box-Shadow : 0 var (-_ t, var (-h)) var (-c);
  클립 경로 : 삽입 (0 0 0 0);
  배경 : 선형 그레이드 (var (-c) 0 0) 0 var (-_ t, var (-h)) no-Repeat;
  전환 : 0.4S, 클립 경로 0.4S 0.4S;
}
.Hover-4 : 호버 {
  --_ t : 0;
  --_ c : #0000;
  클립 경로 : 삽입 (0 0 calc (-1 * var (-h)) 0);
  전환 : 0.4S 0.4S, 클립 경로 0.4S;
}

box-shadow 를 자세히 살펴보면 text-shadow 내부의 흰색 텍스트 레이어와 동일한 값이 있음을 알 수 있습니다. 둘 다 같은 방식으로 움직여야하기 때문에 이것은 논리적입니다. 둘 다 상단으로 미끄러 져 들어갑니다. box-shadow 요소 뒤에 있고 text-shadow 맨 위에 있습니다.

다음은 레이어가 어떻게 이동하는지 시각화하기위한 몇 가지 수정이있는 데모입니다.

잠깐, 배경 구문은 두 번째 호버 효과에 사용 된 것과 약간 다릅니다!

좋은 시력! 예, 우리는 다른 배경 기술을 사용하여 동일한 효과를 생성하고 있습니다. 크기를 0%에서 100%로 애니메이션하는 대신 위치를 애니메이션합니다.

그라디언트의 크기를 지정하지 않으면 기본적으로 전체 너비와 높이를 차지합니다. 요소 ( --h )의 높이를 알고 있으므로 0 var(--h) 에서 0 0 까지 위치를 업데이트하여 슬라이딩 효과를 만들 수 있습니다.

 .hover-4 {
  / * ... */
  배경 : 선형 그레이드 (var (-c) 0 0) 0 var (-_ t, var (-h)) no-Repeat;
}
.Hover-4 : 호버 {
  --_ t : 0;
}

우리는 background-size 애니메이션을 사용하여 같은 효과를 얻을 수 있지만 트릭 목록에 또 다른 트릭을 추가했습니다!

데모에서는 inset(0 0 1px 0) 도 사용했습니다… 왜?

나는 때때로 여기에 픽셀이나 백분율을 추가하거나 제거하여 아주 좋아 보이지 않는 것을 완성합니다. 이 경우 바닥에 나쁜 선이 나타나면 1px를 추가하면 제거됩니다.

건식 스위칭 변수 최적화는 어떻습니까?

이 일을 당신에게 맡길 게요! 이 네 가지 호버 효과와 이전 기사를 읽은 후에는 하나의 변수 만 사용하도록 코드를 업데이트 할 수 있어야합니다. 나는 의견에서 당신의 시도를보고 싶습니다!

이제 당신은!

마지막 호버 효과를 공유하겠습니다.이 효과는 이전 효과의 또 다른 버전입니다. 코드를 보지 않고 어떻게 구현되는지 알 수 있습니까? 이것은 훌륭한 운동이므로 속임수를 쓰지 마십시오!

요약

우리는 하나의 요소와 몇 줄의 CSS 라인을 사용하는 것이 텍스트 요소에 다소 복잡한 호버 효과를 만들기에 충분한 방법을 보여주는 많은 예를 살펴 보았습니다. 의사 요소가 필요하지 않습니다! 우리는 여러 기술을 결합하여 더 작은 노력으로보다 복잡한 애니메이션을 달성 할 수 있습니다.

이 기사 에서이 네 가지 텍스트 Shadow 호버 효과를 넘어서는 데 관심이 있다면 다양한 기술을 탐색하는 500 개의 호버 효과 컬렉션을 확인하십시오.

위 내용은 CSS 텍스트 섀도우를 사용하는 4 개의 쿨 호버 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!