배경 클리핑, 마스크 및 3D를 사용하는 멋진 CSS 호버 효과

CSS 호버 효과에 대한 흥미로운 접근 방식에 대한 일련의 게시물을 살펴보았습니다. 우리는 CSS를 사용하는 많은 예제 background 속성, 다음으로 이동했습니다. text-shadow 재산 어디에 우리는 기술적으로 그림자를 사용하지 않았습니다. 우리는 또한 그것들을 CSS 변수와 결합했고 calc() 코드를 최적화하고 관리하기 쉽게 만듭니다.

이 기사에서는 이 두 기사를 바탕으로 더 복잡한 CSS 호버 애니메이션을 만들 것입니다. 배경 클리핑, CSS 마스크, 3D 원근법으로 발을 적시는 것에 대해 이야기하고 있습니다. 즉, 이번에는 고급 기술을 탐색하고 CSS가 호버 효과로 수행할 수 있는 작업의 한계를 뛰어 넘을 것입니다!

---

다음은 우리가 만들고 있는 것의 맛입니다.

호버 효과 사용 background-clip

이야기하자 background-clip. 이 CSS 속성은 text 키워드 값 그라디언트를 적용할 수 있는 본문 실제 대신 요소의 배경.

예를 들어, 마우스 오버 시 텍스트 색상을 변경할 수 있습니다. color 속성이지만 이 방법으로 색상 변경을 애니메이션으로 만듭니다.

내가 한 모든 것은 추가 background-clip: text 요소와 transition 전에, background-position. 그것보다 더 복잡할 필요는 없습니다!

그러나 배경 클리핑 값이 다른 여러 그라디언트를 결합하면 더 잘할 수 있습니다.

이 예에서는 두 개의 다른 그래디언트와 두 개의 값을 사용합니다. background-clip. 첫 번째 배경 그라디언트가 텍스트에 잘립니다( text 값)을 사용하여 호버 시 색상을 설정하고 두 번째 배경 그라디언트가 하단 밑줄을 생성합니다( padding-box 값). 다른 모든 것은 다음에서 직접 복사됩니다. 첫 번째 기사에서 우리가 한 작업 이 시리즈의.

텍스트를 스캔한 다음 색상을 지정하는 것처럼 막대가 위에서 아래로 미끄러지는 호버 효과는 어떻습니까?

이번에는 첫 번째 그라디언트의 크기를 변경하여 선을 만들었습니다. 그런 다음 텍스트 색상을 업데이트하는 다른 그라디언트로 슬라이드하여 환상을 만듭니다! 이 펜에서 일어나는 일을 시각화할 수 있습니다.

우리는 우리가 할 수 있는 일의 표면만 긁었을 뿐입니다. background-clip핑 파워! 그러나 이 기술은 Firefox가 많은 보고된 버그 관련 background-clip. Safari에도 지원 문제가 있습니다. 따라서 Chrome만 이 항목에 대한 견고한 지원을 제공하므로 계속 진행하면서 열어 두십시오.

다음을 사용하여 다른 호버 효과로 이동해 보겠습니다. background-clip:

당신은 아마도 이것이 우리가 방금 다룬 것에 비해 매우 쉬워 보인다고 생각할 것입니다. 그리고 당신이 옳습니다. 여기에 멋진 것은 없습니다. 내가 하는 일은 하나의 그라디언트를 슬라이딩하면서 다른 그라디언트의 크기를 늘리는 것뿐입니다.

하지만 우리는 고급 호버 효과를 보기 위해 왔습니다. 맞습니까? 마우스 커서가 요소를 떠날 때 애니메이션이 달라지도록 약간 변경해 보겠습니다. 호버 효과는 같지만 애니메이션의 끝이 다릅니다.

멋지죠? 코드를 분석해 보겠습니다.

.hover { --c: #1095c1; /* the color */ color: #0000; background: linear-gradient(90deg, #fff 50%, var(--c) 0) calc(100% - var(--_p, 0%)) / 200%, linear-gradient(var(--c) 0 0) 0% 100% / var(--_p, 0%) no-repeat, var(--_c, #0000); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; transition: 0s, color .5s, background-color .5s;
}
.hover:hover { color: #fff; --_c: var(--c); --_p: 100%; transition: 0.5s, color 0s .5s, background-color 0s .5s;
}

세 개의 배경 레이어가 있습니다. 두 개의 그라디언트와 background-color 다음을 사용하여 정의 --_c 초기에 투명으로 설정된 변수(#0000). 마우스를 가져가면 색상이 흰색으로 변경되고 --_c 기본 색상에 대한 변수(--c).

여기에 무슨 일이 일어나고 있는지입니다 transition: 첫째, 모든 것에 전환을 적용하지만 지연 color 과 background-color by 0.5s 슬라이딩 효과를 생성합니다. 그 직후, 우리는 변경 color 그리고 background-color. 텍스트가 이미 흰색이고(첫 번째 그라디언트 덕분에) 배경이 이미 기본 색상으로 설정되어 있기 때문에(두 번째 그라디언트 덕분에) 시각적인 변화가 없음을 알 수 있습니다.

그런 다음 마우스 아웃 시 모든 항목에 즉각적인 변경을 적용합니다. 0s 지연)를 제외하고 color 과 background-color 전환이 있는 것입니다. 이것은 모든 그라디언트를 초기 상태로 되돌린다는 것을 의미합니다. 다시 말하지만 텍스트가 color 과 background-color 호버에서 이미 변경되었습니다.

마지막으로 색상에 페이딩을 적용하고 background-color 애니메이션의 마우스 아웃 부분을 생성합니다. 이해하기 어려울 수 있지만 다른 색상을 사용하여 트릭을 더 잘 시각화할 수 있습니다.

위에서 여러 번 마우스를 가져가면 마우스 오버 시 애니메이션되는 속성과 마우스 아웃 시 애니메이션되는 속성이 표시됩니다. 그러면 동일한 호버 효과에 대해 두 가지 다른 애니메이션에 도달한 방법을 이해할 수 있습니다.

잊지 말자 우리가 사용한 DRY 스위칭 기술 스위치에 대해 하나의 변수만 사용하여 코드 양을 줄이는 데 도움이 되도록 이 시리즈의 이전 기사에서:

.hover { --c: 16 149 193; /* the color using the RGB format */ color: rgb(255 255 255 / var(--_i, 0)); background: /* Gradient #1 */ linear-gradient(90deg, #fff 50%, rgb(var(--c)) 0) calc(100% - var(--_i, 0) * 100%) / 200%, /* Gradient #2 */ linear-gradient(rgb(var(--c)) 0 0) 0% 100% / calc(var(--_i, 0) * 100%) no-repeat, /* Background Color */ rgb(var(--c)/ var(--_i, 0)); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; --_t: calc(var(--_i,0)*.5s); transition: var(--_t), color calc(.5s - var(--_t)) var(--_t), background-color calc(.5s - var(--_t)) var(--_t);
}
.hover:hover { --_i: 1;
}

내가 메인 색상에 대해 RGB 구문에 도달한 이유가 궁금하다면 알파 투명도를 가지고 놀아야 했기 때문입니다. 나는 또한 변수를 사용하고있다. --_t 에 사용되는 중복 계산을 줄이기 위해 transition 재산.

다음 부분으로 이동하기 전에 여기에 의존하는 호버 효과의 더 많은 예가 있습니다. background-clip. 하나하나 자세히 설명하기에는 너무 길지만 지금까지 배운 내용을 통해 코드를 쉽게 이해할 수 있습니다. 코드를 보지 않고 혼자 몇 가지를 시도해 보는 것은 좋은 영감이 될 수 있습니다.

내가 알지. 이것들은 이상하고 흔하지 않은 호버 효과이며 대부분의 상황에서 너무 많다는 것을 알고 있습니다. 하지만 이것이 CSS를 연습하고 배우는 방법입니다. 기억해, 우리는 한계를 뛰어넘다 CSS 호버 효과. 호버 효과는 참신할 수 있지만 우리는 다른 것에 가장 확실히 사용될 수 있는 새로운 기술을 배우고 있습니다.

CSS를 사용한 호버 효과 mask

뭔지 맞춰봐? CSS mask 속성은 동일한 방식으로 그라디언트를 사용합니다. background 속성은 그렇게 하므로 다음에 만드는 것이 매우 간단하다는 것을 알 수 있습니다.

멋진 밑줄을 만드는 것으로 시작해 보겠습니다.

나는 사용하고있다. background 해당 데모에서 지그재그 하단 테두리를 만듭니다. 그 밑줄에 애니메이션을 적용하고 싶다면 배경 속성만 사용하는 것은 지루할 것입니다.

CSS 입력 mask.

코드가 이상해 보일 수 있지만 논리는 여전히 이전의 모든 배경 애니메이션과 동일합니다. 그만큼 mask XNUMX개의 그라데이션으로 구성되어 있습니다. 첫 번째 그래디언트는 콘텐츠 영역을 덮는 불투명한 색상으로 정의됩니다( content-box 값). 첫 번째 그라디언트는 텍스트를 표시하고 아래쪽 지그재그 테두리를 숨깁니다. content-box 이다 mask-clip 와 동일하게 동작하는 값 background-clip

linear-gradient(#000 0 0) content-box

두 번째 그라데이션은 전체 영역을 덮을 것입니다(덕분에 padding-box). 이것은 다음을 사용하여 정의된 너비를 가지고 있습니다. --_p 변수이며 요소의 왼쪽에 배치됩니다.

linear-gradient(#000 0 0) 0 / var(--_p, 0%) padding-box

이제 의 값을 변경하기만 하면 됩니다. --_p 두 번째 그라디언트에 대한 슬라이딩 효과를 만들고 밑줄을 표시하려면 마우스를 가져갑니다.

.hover:hover { --_p: 100%; color: var(--c);
}

다음 데모에서는 마스크 레이어를 배경으로 사용하여 트릭이 발생하는 것을 더 잘 볼 수 있습니다. 녹색과 빨간색 부분은 요소의 보이는 부분이고 나머지는 모두 투명하다고 상상해 보십시오. 그것이 우리가 동일한 그라디언트를 사용하는 경우 마스크가 수행하는 작업입니다.

이러한 트릭을 사용하면 단순히 다른 그래디언트 구성을 사용하여 많은 변형을 쉽게 만들 수 있습니다. mask 재산:

해당 데모의 각 예제는 약간 다른 그라데이션 구성을 사용합니다. mask. 또한 배경 구성과 마스크 구성 사이의 코드 분리에 주목하십시오. 독립적으로 관리 및 유지 관리할 수 있습니다.

대신 지그재그 밑줄을 물결 모양 밑줄로 바꿔 배경 구성을 변경해 보겠습니다.

호버 효과의 또 다른 컬렉션! 모든 마스크 구성을 유지하고 배경을 변경하여 다른 모양을 만들었습니다. 이제 내가 어떻게 할 수 있었는지 이해할 수 있습니다. 400개의 호버 효과에 도달하려면 유사 요소 없이도 더 많은 것을 가질 수 있습니다!

예를 들면 다음과 같은 것이 아닙니다.

다음은 도전 과제입니다. 마지막 데모의 테두리는 다음을 사용하는 그라디언트입니다. mask 속성을 공개합니다. 애니메이션의 논리를 이해할 수 있습니까? 언뜻 보기에는 복잡해 보일 수 있지만 그라디언트에 의존하는 대부분의 다른 호버 효과에 대해 살펴본 논리와 매우 유사합니다. 설명을 댓글로 남겨주세요!

3D의 호버 효과

단일 요소로 3D 효과를 만드는 것이 불가능하다고 생각할 수도 있지만(그리고 유사 요소에 의존하지 않고!) CSS에는 이를 가능하게 하는 방법이 있습니다.

여기서 보고 있는 것은 실제 3D 효과가 아니라 CSS를 결합한 3D 공간에서 2D의 완벽한 환상입니다. background, clip-path및 transform 속성.

가장 먼저 할 일은 변수를 정의하는 것입니다.

--c: #1095c1; /* color */
--b: .1em; /* border length */
--d: 20px; /* cube depth */

그런 다음 위의 변수를 사용하는 너비로 투명한 테두리를 만듭니다.

--_s: calc(var(--d) + var(--b));
color: var(--c);
border: solid #0000; /* fourth value sets the color's alpha */
border-width: var(--b) var(--b) var(--_s) var(--_s);

요소의 상단과 오른쪽은 모두 같아야 합니다. --b 값 동안 아래쪽과 왼쪽은 합과 같아야 합니다. --b 과 --d (이것은 --_s 변하기 쉬운).

트릭의 두 번째 부분에서는 이전에 정의한 모든 경계 영역을 포함하는 하나의 그라디언트를 정의해야 합니다. ㅏ conic-gradient 그것을 위해 일할 것입니다 :

background: conic-gradient( at left var(--_s) bottom var(--_s), #0000 90deg,var(--c) 0 ) 0 100% / calc(100% - var(--b)) calc(100% - var(--b)) border-box;

트릭의 세 번째 부분에 대해 다른 그라디언트를 추가합니다. 이것은 첫 번째 이전 그라디언트와 겹치는 두 개의 반투명 흰색 값을 사용하여 기본 색상의 다른 음영을 만들어 음영과 깊이의 환상을 줍니다.

conic-gradient( at left var(--d) bottom var(--d), #0000 90deg, rgb(255 255 255 / 0.3) 0 225deg, rgb(255 255 255 / 0.6) 0
) border-box

마지막 단계는 적용하는 것입니다. CSS clip-path 긴 그림자 정렬 느낌을 위해 모서리를 자르려면:

clip-path: polygon( 0% var(--d), var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, 0% 100%
)

그게 다야! 우리는 단지 두 개의 그라디언트와 clip-path CSS 변수를 사용하여 쉽게 조정할 수 있습니다. 이제 애니메이션을 적용하기만 하면 됩니다!

이전 그림의 좌표(빨간색으로 표시)에 주목하십시오. 애니메이션을 만들기 위해 업데이트해 보겠습니다.

clip-path: polygon( 0% var(--d), /* reverses var(--d) 0% */ var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, /* reverses 100% calc(100% - var(--d)) */ 0% 100% /* reverses var(--d) calc(100% - var(--d)) */
)

트릭은 요소의 아래쪽과 왼쪽 부분을 숨겨서 깊이가 전혀 없는 직사각형 요소만 남도록 하는 것입니다.

이 펜은 clip-path 애니메이션의 일부를 사용하여 수행 중인 작업을 확인합니다.

마지막 터치는 다음을 사용하여 요소를 반대 방향으로 이동하는 것입니다. translate — 환상은 완벽합니다! 다양한 깊이에 대해 다양한 사용자 정의 속성 값을 사용하는 효과는 다음과 같습니다.

두 번째 호버 효과는 동일한 구조를 따릅니다. 내가 한 일은 오른쪽 위 움직임 대신 왼쪽 위 움직임을 만들기 위해 몇 가지 값을 업데이트하는 것입니다.

결합 효과!

우리가 다룬 모든 것에 대한 놀라운 점은 그것들이 모두 서로를 보완한다는 것입니다. 다음은 내가 추가하는 예입니다. 전에, text-shadow 두 번째 기사의 효과 시리즈에서 background 첫 번째 기사의 애니메이션 기법 우리가 방금 다룬 3D 트릭을 사용하는 동안:

실제 코드는 처음에는 혼란스러울 수 있지만 조금 더 자세히 살펴보십시오. 이 세 가지 다른 효과의 조합일 뿐임을 알 수 있습니다.

배경, 클립 경로 및 대시를 결합하는 마지막 호버 효과로 이 기사를 마치겠습니다. perspective 다른 3D 효과를 시뮬레이션하려면:

동일한 효과를 이미지에 적용했는데 결과는 단일 요소로 3D를 시뮬레이션하는 데 아주 좋았습니다.

마지막 데모가 어떻게 작동하는지 자세히 살펴보고 싶으신가요? 나는 그것에 대해 뭔가를 썼다.

최대 포장

웁, 우리는 끝났어! 나는 그것이 많은 까다로운 CSS라는 것을 압니다. 그러나 (1) 우리는 그런 종류의 일에 적합한 웹사이트에 있고, (2) 목표는 다양한 CSS 속성에 대한 이해를 새로운 수준으로 끌어올리는 것입니다. 서로.

이 작은 일련의 고급 CSS 호버 효과를 종료하는 지금 여기에서 다음 단계가 무엇인지 물을 수 있습니다. 다음 단계는 우리가 배운 모든 것을 버튼, 메뉴 항목, 링크 등과 같은 다른 요소에 적용하는 것이라고 말하고 싶습니다. 우리는 정확한 이유를 위해 머리글 요소로 트릭을 제한하는 한 일을 오히려 단순하게 유지했습니다. ; 실제 요소는 중요하지 않습니다. 개념을 잡고 실행하여 새로운 것을 만들고 실험하고 배우십시오!

---

배경 클리핑, 마스크 및 3D를 사용하는 멋진 CSS 호버 효과 원래에 게시 CSS 트릭. 너는해야한다. 뉴스레터 받기.

• 코인스마트. 유럽 ​​최고의 비트코인 ​​및 암호화폐 거래소.
• 플라토 블록체인. Web3 메타버스 인텔리전스. 지식 증폭. 무료 액세스.
• 크립토호크. 알트코인 레이더. 무료 시험판.
• 출처: https://css-tricks.com/css-hover-effects-background-masks-3d/