우리는 CSS 호버 효과에 대한 흥미로운 접근 방식에 대한 일련의 게시물을 살펴 보았습니다. 우리는 CSS 배경 속성을 사용하는 많은 예제로 시작한 다음 기술적으로 그림자를 사용하지 않은 Text-Shadow 속성으로 이동했습니다. 또한 코드를 최적화하고 쉽게 관리 할 수 있도록 CSS 변수 및 calc ()와 결합했습니다.
이 기사에서는이 두 기사를 구축하여 더 복잡한 CSS 호버 애니메이션을 만들 것입니다. 우리는 배경 클리핑, CSS 마스크, 심지어 3D 관점으로 발을 젖게하는 것에 대해 이야기하고 있습니다. 다시 말해, 우리는 이번에는 고급 기술을 탐구하고 호버 효과로 CSS가 할 수있는 일의 한계를 추진할 것입니다!
우리가 만드는 것의 맛은 다음과 같습니다.
배경 클립에 대해 이야기합시다. 이 CSS 속성은 실제 배경 대신 요소의 텍스트 에 그라디언트를 적용 할 수있는 텍스트 키워드 값을 수용합니다.
예를 들어, 색상 속성을 사용하는 것처럼 호버에서 텍스트의 색상을 변경할 수 있지만이 방법으로 색상 변화에 애니메이션이 있습니다.
내가 한 것은 배경 클립을 추가하는 것뿐만 아니라 요소에 텍스트를 추가하고 배경 위치를 전환하는 것입니다. 그것보다 더 복잡 할 필요는 없습니다!
그러나 여러 가지 그라디언트를 다른 배경 클리핑 값과 결합하면 더 잘할 수 있습니다.
이 예에서는 배경 클립과 함께 두 개의 다른 그라데이션과 두 개의 값을 사용합니다. 첫 번째 백그라운드 그라디언트는 텍스트에 클립되어 (텍스트 값 덕분에) 호버에 색상을 설정하는 반면, 두 번째 배경 구배는 밑줄을 생성합니다 (패딩 박스 값 덕분). 다른 모든 것은이 시리즈의 첫 번째 기사에서 한 작품에서 바로 복사됩니다.
텍스트가 스캔 된 것처럼 보이는 방식으로 막대가 위에서 아래로 미끄러지는 호버 효과는 어떻습니까?
이번에는 첫 번째 그라디언트의 크기를 변경하여 선을 만듭니다. 그런 다음 텍스트 색상을 업데이트하여 환상을 만듭니다! 이 펜에서 일어나는 일을 시각화 할 수 있습니다.
우리는 배경 클리핑 파워로 우리가 할 수있는 일의 표면 만 긁 혔습니다! 그러나 Firefox는 백그라운드 클립과 관련된보고되는 버그가 많이있는 것으로 알려져 있기 때문에이 기술은 생산에서 사용하지 않기를 원할 것입니다. Safari에는 지원 문제도 있습니다. 그것은 Chrome만이 물건에 대한 견고한지지를 제공하기 때문에 우리가 계속하면서 열어 두십시오.
배경 클립을 사용하여 다른 호버 효과로 이동합시다.
당신은 아마도 우리가 방금 다룬 것과 비교할 때이 사람이 매우 쉽게 보이고 있다고 생각할 것입니다. 그리고 당신은 옳습니다. 여기에는 멋진 것이 없습니다. 내가하고있는 일은 하나의 그라디언트를 미끄러지면서 다른 그라디언트의 크기를 증가시키는 것입니다.
그러나 우리는 고급 호버 효과를 보려고 여기에 있습니다. 마우스 커서가 요소를 떠날 때 애니메이션이 다르도록 조금 변경합시다. 동일한 호버 효과이지만 애니메이션의 다른 결말 :
쿨합니까? 코드를 해부하겠습니다.
.hover {
---C : #1095C1; / * 색상 */
색상 : #0000;
배경:
Linear-Gradient (90deg, #fff 50%, var (-c) 0) calc (100%var (-_ p, 0%)) / 200%,
선형 그레이드 (var (-C) 0 0) 0% 100% / var (-_ p, 0%) No-Repeat,
var (-_ c, #0000);
-webkit-background-clip : 텍스트, 패딩 박스, 패딩 박스;
배경 클립 : 텍스트, 패딩 박스, 패딩 박스;
전환 : 0S, 색상 .5, 배경색 .5;
}
.hover : 호버 {
색상 : #fff;
-_ c : var (-c);
--_ p : 100%;
전환 : 0.5S, 컬러 0S .5S, 배경색 0S .5S;
}우리는 3 개의 배경 레이어-2 개의 그라디언트와 -_ c 변수를 사용하여 정의 된 배경색 (#0000)이 있습니다. 호버에서는 색상을 흰색으로 변경하고 -_ C 변수는 기본 색상 (---C)으로 변경합니다.
그 전환에서 일어나는 일은 다음과 같습니다. 첫째, 우리는 모든 것에 전환을 적용하지만 색상과 배경색을 0.5 초로 지연시켜 슬라이딩 효과를 만듭니다. 그 직후, 우리는 색상과 배경색을 변경합니다. 텍스트가 이미 백인 (첫 번째 그라디언트 덕분에)이기 때문에 시각적 변경 사항이없고 배경이 이미 기본 색상으로 설정되어 있습니다 (두 번째 그라디언트 덕분).
그런 다음 마우스 아웃시 전환이있는 색상과 배경색을 제외하고는 모든 것에 즉각적인 변화를 적용합니다 (0S 지연). 이것은 우리가 모든 그라디언트를 초기 상태로 되돌려 놓았다는 것을 의미합니다. 다시 말하지만, 텍스트 색상과 배경색이 이미 호버에서 변경 되었기 때문에 시각적 변경이 보이지 않을 것입니다.
마지막으로, 우리는 페이딩을 색상과 배경색으로 적용하여 애니메이션의 마우스 아웃 부분을 만듭니다. 이해하기가 까다로울 수 있지만 다른 색상을 사용하여 트릭을 더 잘 시각화 할 수 있습니다.
위의 시간을 많이 마우스를 마시면 호버에 애니메이션을하는 속성과 마우스에 애니메이션이있는 특성이 보입니다. 그런 다음 동일한 호버 효과를 위해 두 가지 다른 애니메이션에 어떻게 도달했는지 이해할 수 있습니다.
이 시리즈의 이전 기사에서 사용한 건식 스위치 기술을 잊지 말고 스위치에 하나의 변수 만 사용하여 코드의 양을 줄이는 데 도움이됩니다.
.hover {
--C : 16 149 193; / * RGB 형식을 사용한 색상 */
색상 : RGB (255 255 255 / var (-_ i, 0));
배경:
/ * 그라디언트 #1 */
Linear-Gradient (90deg, #fff 50%, rgb (var (-c)) 0) calc (100%-var (-_ i, 0) * 100%) / 200%,
/ * 그라디언트 #2 */
Linear-Gradient (rgb (var (-c)) 0) 0% 100% / calc (var (-_ i, 0) * 100%) No-Repeat,
/ * 배경색 */
rgb (var (-c)/ var (-_ i, 0));
-webkit-background-clip : 텍스트, 패딩 박스, 패딩 박스;
배경 클립 : 텍스트, 패딩 박스, 패딩 박스;
-_ t : calc (var (-_ i, 0)*. 5s);
이행:
var (-_ t),
Color Calc (.5s- var (-_ t)) var (-_ t),
배경색 calc (.5s- var (-_ t)) var (-_ t);
}
.hover : 호버 {
--_ i : 1;
}내가 왜 메인 색상의 RGB 구문에 도달했는지 궁금하다면, 알파 투명성을 가지고 놀아야했기 때문입니다. 또한 변수 -_ t를 사용하여 전환 속성에 사용되는 중복 계산을 줄입니다.
다음 부분으로 이동하기 전에 여기에 배경 클립에 의존하는 호버 효과의 더 많은 예가 있습니다. 각각을 자세히 설명하기에는 너무 길지만 지금까지 배운 내용으로 코드를 쉽게 이해할 수 있습니다. 코드를 보지 않고 그들 중 일부를 혼자 시도하는 것은 좋은 영감이 될 수 있습니다.
알아요. 이것들은 미쳤고 드문 호버 효과이며 대부분의 상황에서 너무 많은 것을 알고 있습니다. 그러나 이것은 CSS를 연습하고 배우는 방법입니다. 우리는 CSS 호버 효과의 한계를 넓히는 것을 기억하십시오. 호버 효과는 참신 일지 모르지만, 우리는 다른 것들에 가장 많이 사용될 수있는 새로운 기술을 배우고 있습니다.
뭐야? CSS 마스크 속성은 배경 속성과 같은 방식으로 그라디언트를 사용하므로 우리가 다음에하는 것이 매우 간단하다는 것을 알 수 있습니다.
멋진 밑줄을 구축하는 것으로 시작합시다.
배경을 사용하여 해당 데모에서 지그재그 하단 테두리를 만듭니다. 그 밑줄에 애니메이션을 적용하고 싶다면 백그라운드 속성 만 사용하여 지루한 것입니다.
CSS 마스크를 입력하십시오.
코드는 이상하게 보일 수 있지만 논리는 이전의 모든 배경 애니메이션과 마찬가지로 여전히 동일합니다. 마스크는 두 개의 그라디언트로 구성됩니다. 첫 번째 그라디언트는 컨텐츠 영역을 포괄하는 불투명 색상으로 정의됩니다 (컨텐츠 박스 값 덕분). 첫 번째 그라디언트는 텍스트를 보이게하고 하단 지그재그 테두리를 숨 깁니다. Content-Box
선형 그라디언트 (#000 0 0) 컨텐츠 박스
두 번째 그라디언트는 전체 영역을 포함합니다 (패딩 박스 덕분). 이것은 -_ p 변수를 사용하여 정의 된 너비를 가지며 요소의 왼쪽에 배치됩니다.
Linear-Gradient (#000 0) 0 / var (-_ p, 0%) 패딩 박스
이제, 우리가해야 할 일은 호버의 -_ p 값을 변경하여 2 차 그라디언트에 대한 슬라이딩 효과를 만들고 밑줄을 드러내는 것입니다.
.hover : 호버 {
--_ p : 100%;
색상 : var (-c);
}다음 데모는 마스크 레이어와 함께 배경으로 사용하여 트릭을 더 잘 볼 수 있습니다. 녹색과 빨간색 부분이 요소의 눈에 보이는 부분이며 다른 모든 것이 투명하다고 상상해보십시오. 그것이 우리가 동일한 그라디언트를 사용하면 마스크가 할 일입니다.
이러한 트릭으로 마스크 속성과 다른 그라디언트 구성을 사용하여 많은 변형을 쉽게 만들 수 있습니다.
해당 데모의 각 예제는 마스크에 약간 다른 그라디언트 구성을 사용합니다. 배경 구성과 마스크 구성 사이의 코드의 분리를 주목하십시오. 그들은 독립적으로 관리하고 유지할 수 있습니다.
지그재그 밑줄을 물결 모양의 밑줄로 바꾸어 배경 구성을 변경해 봅시다.
호버 효과의 또 다른 컬렉션! 모든 마스크 구성을 유지하고 배경을 변경하여 다른 모양을 만들었습니다. 이제, 당신은 내가 의사 요소없이 400 개의 호버 효과에 도달 할 수 있었는지 이해할 수 있습니다. 우리는 여전히 더 많은 것을 가질 수 있습니다!
마찬가지로, 왜 다음과 같은 것이 아닙니다.
마지막 데모의 테두리 는 마스크 속성을 사용하여이를 공개하는 그라디언트입니다. 애니메이션의 논리를 알아낼 수 있습니까? 그것은 언뜻보기에 복잡해 보일 수 있지만, 그라디언트에 의존하는 다른 호버 효과의 대부분에 대해 우리가 보았던 논리와 매우 유사합니다. 의견에 설명을 게시하십시오!
단일 요소로 3D 효과를 만드는 것은 불가능하다고 생각할 수도 있지만 (유사 요소에 의지하지 않으면!) CSS는이를 가능하게하는 방법이 있습니다.
당신이보고있는 것은 실제 3D 효과가 아니라 CSS 배경, 클립 경로 및 변환 특성을 결합한 2D 공간에서 3D의 완벽한 환상이 아닙니다.
우리가하는 첫 번째 일은 변수를 정의하는 것입니다.
---C : #1095C1; /* 색상 */ --b : .1em; / * 국경 길이 */ --d : 20px; / * 큐브 깊이 */
그런 다음 위의 변수를 사용하는 너비가있는 투명한 테두리를 만듭니다.
--_ s : calc (var (-d) var (-b)); 색상 : var (-c); 국경 : 솔리드 #0000; / * 네 번째 값은 색상의 알파를 설정합니다 */ 경계-width : var (-b) var (-b) var (-_ s) var (-_ s);
요소의 상단과 오른쪽은 둘 다 -B 값과 같아야하는 반면, 하단과 왼쪽은 -B 및 --d (-_ s 변수)의 합과 같아야합니다.
트릭의 두 번째 부분의 경우, 이전에 정의한 모든 경계 영역을 덮는 하나의 그라디언트를 정의해야합니다. Conic-gradient는 다음을 위해 작동합니다.
배경 : conic-gradient ( 왼쪽 var (-_ s) 하단 var (-_ s), #0000 90deg, var (-c) 0 )) 0 100% / calc (100%-var (-b)) calc (100%-var (-b)) 테두리 박스;
우리는 트릭의 세 번째 부분에 대한 또 다른 그라디언트를 추가합니다. 이것은 첫 번째 이전 그라디언트와 겹치는 두 개의 반 트랜스 펜트 흰색 값을 사용하여 기본 색상의 다른 음영을 만들어 음영과 깊이의 환상을 제공합니다.
코닉 그라디언트 ( 왼쪽 var (-d) 하단 var (-d), #0000 90deg, RGB (255 255 255 / 0.3) 0 225deg, RGB (255 255 255 / 0.6) 0 ) 국경 박스
마지막 단계는 CSS 클립 경로를 적용하여 긴 그림자의 느낌을 위해 모서리를 자르는 것입니다.
클립 경로 : 다각형 ( 0% var (-d), var (-d) 0%, 100% 0%, 100% calc (100%-var (-d)), calc (100%-var (-d)) 100%, 0% 100% ))
그게 다야! 우리는 방금 두 개의 그라디언트와 CSS 변수를 사용하여 쉽게 조정할 수있는 클립 경로로 3D 사각형을 만들었습니다. 자, 우리가해야 할 일은 애니메이션입니다!
이전 그림 (빨간색으로 표시)의 좌표에 주목하십시오. 애니메이션을 만들기 위해 업데이트합시다.
클립 경로 : 다각형 ( 0% var (-d), / * 반전 var (-d) 0% * / var (-d) 0%, 100% 0%, 100% calc (100%-var (-d)), calc (100%-var (-d)) 100%, / * 100% calc (100%-var (-d)) * / 0% 100% / * 반전 var (-d) calc (100% (-d)) * / ))
속임수는 요소의 바닥과 왼쪽 부분을 숨기는 것입니다. 왼쪽의 모든 것은 깊이가없는 직사각형 요소입니다.
이 펜은 애니메이션의 클립 경로 부분을 분리하여 무엇을하고 있는지 확인합니다.
마지막 터치는 번역을 사용하여 요소를 반대 방향으로 움직이는 것입니다. 환상은 완벽합니다! 다음은 다양한 깊이를 위해 다른 사용자 정의 속성 값을 사용하는 효과입니다.
두 번째 호버 효과는 동일한 구조를 따릅니다. 내가 한 것은 오른쪽 상단 대신 상단 왼쪽 움직임을 만들기 위해 몇 가지 값을 업데이트하는 것입니다.
우리가 다룬 모든 것에 대한 멋진 점은 모두 서로를 보완한다는 것입니다. 다음은 방금 다루는 3D 트릭을 사용하는 동안 시리즈의 두 번째 기사에서 첫 번째 기사의 배경 애니메이션 기술에 텍스트 쉐이드 효과를 추가하는 예입니다.
실제 코드는 처음에는 혼란 스러울 수 있지만 계속해서 조금 더 해부합니다.이 세 가지 다른 효과의 조합 일뿐 아니라 거의 혼란스러워합니다.
배경, 클립 경로 및 다른 3D 효과를 시뮬레이션하기위한 관점을 결합한 마지막 호버 효과 로이 기사를 마무리하겠습니다.
이미지에 동일한 효과를 적용했으며 결과는 단일 요소로 3D를 시뮬레이션하는 데 상당히 좋았습니다.
마지막 데모가 어떻게 작동하는지 자세히 살펴 보시겠습니까? 나는 그것에 무언가를 썼다.
OOF, 우리는 끝났습니다! 나는 까다로운 CSS가 많지만 (1) 우리는 그런 종류의 일에 대한 올바른 웹 사이트에 있으며 (2) 목표는 서로 다른 CSS 속성에 대한 이해를 서로 상호 작용할 수있게함으로써 새로운 수준으로 밀어 붙이는 것입니다.
우리는이 일련의 고급 CSS 호버 효과를 폐쇄하기 때문에 다음 단계가 무엇인지 묻고있을 것입니다. 다음 단계는 우리가 배운 모든 것을 취하고 버튼, 메뉴 항목, 링크 등과 같은 다른 요소에 적용하는 것입니다. 실제 요소는 중요하지 않습니다. 개념을 가져 와서 그들과 함께 달리기 위해 새로운 것을 만들고 실험하고 배우십시오!
위 내용은 배경 클리핑, 마스크 및 3D를 사용하는 Cool CSS 호버 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
