아바타를 위한 멋진 호버 효과

누군가의 머리가 원이나 구멍을 뚫고 나오는 그런 효과를 아십니까? 일련의 빨간 고리에서 튀어나오면서 작별 인사를 하는 유명한 Porky Pig 애니메이션이 완벽한 예입니다. Kilian Valkhof는 실제로 얼마 전에 여기 CSS-Tricks에서 다시 만들었습니다..

나는 비슷한 생각을 가지고 있지만 다른 방법과 애니메이션을 뿌렸습니다. 꽤 실용적이고 자신의 아바타와 같은 것에 사용할 수 있는 깔끔한 호버 효과를 만든다고 생각합니다.

저거 봐? 아바타가 있는 원에서 바로 튀어나오는 스케일링 애니메이션을 만들 것입니다. 멋지죠? 코드를 보지 말고 이 애니메이션을 단계별로 함께 만들어 봅시다.

HTML: 단 하나의 요소

데모 코드를 확인하지 않고 얼마나 많은지 궁금하다면 div우리의 마크업은 하나의 이미지 요소일 뿐이므로 여기까지만 하면 됩니다.

<img src="" alt="">

예, 단일 요소입니다! 이 연습의 어려운 부분은 가능한 최소한의 코드를 사용하는 것입니다. 당신이 있었다면 나를 따라 한동안은 이것에 익숙해져야 합니다. 가능한 가장 작고 유지 관리하기 쉬운 코드로 달성할 수 있는 CSS 솔루션을 찾기 위해 열심히 노력합니다.

내가 쓴 일련의 기사 여기 CSS-Tricks에서 단일 요소를 포함하는 동일한 HTML 마크업을 사용하여 다양한 호버 효과를 탐색합니다. 그래디언트, 마스킹, 클리핑, 윤곽선 및 레이아웃 기술에 대해 자세히 설명합니다. 이 게시물에서 많은 트릭을 재사용할 것이기 때문에 확인하는 것이 좋습니다.

배경이 투명한 정사각형 이미지 파일이 현재 작업에 가장 적합합니다. 여기 당신이 그것으로 시작하려는 경우 내가 사용하고있는 것이 있습니다.

가능한 한 실제 이미지를 사용하여 이에 대한 많은 예를 볼 수 있기를 바랍니다. 따라서 컬렉션을 구축할 수 있도록 작업을 완료한 후 의견에 최종 결과를 공유해 주세요!

CSS로 이동하기 전에 먼저 효과를 분석해 보겠습니다. 마우스를 올리면 이미지가 커지므로 반드시 사용하겠습니다. transform: scale() 거기에. 아바타 뒤에 원이 있고 방사형 그래디언트가 트릭을 수행해야 합니다. 마지막으로, 원 뒤에 아바타의 모양을 만드는 원의 아래쪽에 테두리를 만드는 방법이 필요합니다.

일하러 가자!

스케일 효과

변환을 추가하여 시작하겠습니다.

img { width: 280px; aspect-ratio: 1; cursor: pointer; transition: .5s;
}
img:hover { transform: scale(1.35);
}

아직 복잡한 것은 없겠죠? 계속합시다.

동호회

우리는 배경이 방사형 그라데이션이 될 것이라고 말했습니다. 방사형 그래디언트의 색상 사이에 하드 스톱을 만들어 실선으로 원을 그리는 것처럼 보이게 만들 수 있기 때문에 완벽합니다.

img { --b: 5px; /* border width */ width: 280px; aspect-ratio: 1; background: radial-gradient( circle closest-side, #ECD078 calc(99% - var(--b)), #C02942 calc(100% - var(--b)) 99%, #0000 ); cursor: pointer; transition: .5s;
}
img:hover { transform: scale(1.35);
}

CSS 변수에 유의하십시오. --b, 나는 거기를 사용하고 있습니다. 방사형 그래디언트의 빨간색 부분에 대한 하드 컬러 스톱을 정의하는 데 실제로 사용되는 "테두리"의 두께를 나타냅니다.

다음 단계는 호버에서 그라디언트 크기로 재생하는 것입니다. 원은 이미지가 커짐에 따라 크기를 유지해야 합니다. 우리는 scale() 변환, 우리는 실제로 감소 그렇지 않으면 아바타와 함께 확장되기 때문에 원의 크기입니다. 따라서 이미지가 확대되는 동안 축소하려면 그래디언트가 필요합니다.

CSS 변수를 정의하여 시작하겠습니다. --f, "축척 비율"을 정의하고 이를 사용하여 원의 크기를 설정합니다. 나는 사용하고있다 1 기본값으로 사용합니다. 이미지의 초기 배율과 변환하는 원입니다.

다음은 트릭을 설명하는 데모입니다. 배후에서 무슨 일이 일어나고 있는지 보려면 마우스를 가져가십시오.

세 번째 색상을 추가했습니다. radial-gradient 호버에서 그라디언트 영역을 더 잘 식별하려면 다음을 수행하십시오.

radial-gradient( circle closest-side, #ECD078 calc(99% - var(--b)), #C02942 calc(100% - var(--b)) 99%, lightblue
);

이제 배경을 원의 중앙에 배치하고 전체 높이를 차지하도록 해야 합니다. 나는 모든 것을 직접 선언하는 것을 좋아합니다. background 속기 속성을 사용하여 배경 위치 지정을 추가하고 바로 뒤에 해당 값을 추가하여 반복되지 않도록 할 수 있습니다. radial-gradient():

background: radial-gradient() 50% / calc(100% / var(--f)) 100% no-repeat;

배경은 중앙(50%), 너비는 다음과 같습니다. calc(100%/var(--f))이고 높이가 100%.

언제 확장되지 않습니다. --f 동일하다 1 — 다시 말하지만, 초기 규모입니다. 한편 그래디언트는 컨테이너의 전체 너비를 차지합니다. 우리가 증가할 때 --f, 요소의 크기가 커집니다. scale() 변환 — 그래디언트의 크기가 감소합니다.

이 모든 것을 데모에 적용했을 때 얻은 결과는 다음과 같습니다.

점점 가까워지고 있습니다! 상단에 오버플로 효과가 있지만 이미지의 하단 부분을 숨겨야 하므로 원 앞에 앉아 있는 것이 아니라 원 밖으로 튀어나오는 것처럼 보입니다. 그것이 이 모든 것의 까다로운 부분이며 우리가 다음에 할 것입니다.

하단 테두리

나는 이것을 처음으로 border-bottom 속성을 사용했지만 테두리의 크기를 원의 크기와 일치시키는 방법을 찾을 수 없었습니다. 내가 얻을 수 있는 최선의 방법은 다음과 같습니다. 즉시 잘못되었음을 알 수 있습니다.

실제 솔루션은 다음을 사용하는 것입니다. outline 재산. 예, outline가 아닌 border. 에 이전 기사, 나는 방법을 보여줍니다 outline 강력하고 멋진 호버 효과를 만들 수 있습니다. 와 결합 outline-offset, 우리는 효과에 필요한 것을 정확히 가지고 있습니다.

아이디어는 outline 이미지에서 오프셋을 조정하여 아래쪽 테두리를 만듭니다. 오프셋은 그래디언트 크기와 같은 방식으로 배율 인수에 따라 달라집니다.

이제 아래쪽 "경계"(실제로는 outline) 그라디언트로 생성된 "테두리"와 결합하여 완전한 원을 만듭니다. 여전히 일부를 숨길 필요가 있습니다. outline (상단과 측면에서) 잠시 후에 살펴보겠습니다.

다음은 이미지 크기(--s) 및 "테두리" 색상(--c):

img { --s: 280px; /* image size */ --b: 5px; /* border thickness */ --c: #C02942; /* border color */ --f: 1; /* initial scale */ width: var(--s); aspect-ratio: 1; cursor: pointer; border-radius: 0 0 999px 999px; outline: var(--b) solid var(--c); outline-offset: calc((1 / var(--f) - 1) * var(--s) / 2 - var(--b)); background: radial-gradient( circle closest-side, #ECD078 calc(99% - var(--b)), var(--c) calc(100% - var(--b)) 99%, #0000 ) 50% / calc(100% / var(--f)) 100% no-repeat; transform: scale(var(--f)); transition: .5s;
}
img:hover { --f: 1.35; /* hover scale */
}

원형 아래쪽 테두리가 필요하므로 border-radius 하단에는 outline 그라디언트의 곡률을 일치시킵니다.

에 사용된 계산 outline-offset 보기보다 훨씬 간단합니다. 기본적으로, outline 그려진다 외부 요소 상자의. 그리고 우리의 경우에는 중첩하다 요소. 보다 정확하게는 그래디언트에 의해 생성된 원을 따라야 합니다.

요소의 크기를 조정하면 원과 가장자리 사이의 공간이 보입니다. 스케일 변환이 실행된 후 원을 같은 크기로 유지하는 것이 아이디어임을 잊지 마십시오. 그러면 위의 그림과 같이 윤곽선의 오프셋을 정의하는 데 사용할 공간이 남습니다.

두 번째 요소가 스케일링되어 있으므로 결과도 스케일링됩니다. 즉, 결과를 다음과 같이 나누어야 합니다. f 실제 오프셋 값을 얻으려면:

Offset = ((f - 1) * S/2) / f = (1 - 1/f) * S/2

외부에서 내부로 이동하려면 윤곽선이 필요하므로 음수 기호를 추가합니다.

Offset = (1/f - 1) * S/2

다음은 윤곽선이 그래디언트를 따르는 방법을 보여주는 간단한 데모입니다.

이미 보셨을지 모르지만 원이 스며들게 하는 대신 원을 겹칠 아래쪽 윤곽선이 여전히 필요합니다. 오프셋에서 테두리의 크기를 제거하여 이를 수행할 수 있습니다.

outline-offset: calc((1 / var(--f) - 1) * var(--s) / 2) - var(--b));

이제 아웃라인에서 상단 부분을 제거하는 방법을 찾아야 합니다. 즉, 이미지의 하단 부분만 원합니다. outline.

먼저 상단에 겹침을 방지하기 위해 패딩을 사용하여 상단에 공간을 추가해 보겠습니다.

img { --s: 280px; /* image size */ --b: 5px; /* border thickness */ --c: #C02942; /* border color */ --f: 1; /* initial scale */ width: var(--s); aspect-ratio: 1; padding-block-start: calc(var(--s)/5); /* etc. */
}
img:hover { --f: 1.35; /* hover scale */
}

해당 상단 패딩에는 특별한 논리가 없습니다. 아이디어는 윤곽선이 아바타의 머리에 닿지 않도록 하는 것입니다. 나는 요소의 크기를 사용하여 항상 같은 비율을 갖도록 해당 공간을 정의했습니다.

내가 추가했음을 참고하십시오. content-box 가치 background:

background: radial-gradient( circle closest-side, #ECD078 calc(99% - var(--b)), var(--c) calc(100% - var(--b)) 99%, #0000 ) 50%/calc(100%/var(--f)) 100% no-repeat content-box;

우리는 패딩을 추가했고 콘텐츠 상자에 배경만 설정하기를 원하기 때문에 이것이 필요합니다.

믹스에 CSS 마스크 추가

우리는 마지막 부분에 도달했습니다! 우리가 해야 할 일은 일부 조각을 숨기는 것입니다. 이를 위해 우리는 mask 속성과 물론 그래디언트.

다음은 숨기거나 더 정확하게 보여주기 위해 필요한 것을 설명하는 그림입니다.

왼쪽 이미지는 현재 가지고 있는 이미지이고 오른쪽은 우리가 원하는 이미지입니다. 녹색 부분은 최종 결과를 얻기 위해 원본 이미지에 적용해야 하는 마스크를 나타냅니다.

마스크의 두 부분을 식별할 수 있습니다.

• 아바타 뒤의 원을 만드는 데 사용한 방사형 그래디언트와 동일한 치수 및 곡률을 갖는 하단의 원형 부분
• 외곽선 내부 영역을 덮는 상단의 직사각형. 외곽선이 위쪽의 녹색 영역 밖에 있는지 확인하십시오. 가장 중요한 부분입니다. 아래쪽 부분만 보이도록 외곽선을 잘라낼 수 있기 때문입니다.

최종 CSS는 다음과 같습니다.

img { --s: 280px; /* image size */ --b: 5px; /* border thickness */ --c: #C02942; /* border color */ --f: 1; /* initial scale */ --_g: 50% / calc(100% / var(--f)) 100% no-repeat content-box; --_o: calc((1 / var(--f) - 1) * var(--s) / 2 - var(--b)); width: var(--s); aspect-ratio: 1; padding-top: calc(var(--s)/5); cursor: pointer; border-radius: 0 0 999px 999px; outline: var(--b) solid var(--c); outline-offset: var(--_o); background: radial-gradient( circle closest-side, #ECD078 calc(99% - var(--b)), var(--c) calc(100% - var(--b)) 99%, #0000) var(--_g); mask: linear-gradient(#000 0 0) no-repeat 50% calc(-1 * var(--_o)) / calc(100% / var(--f) - 2 * var(--b)) 50%, radial-gradient( circle closest-side, #000 99%, #0000) var(--_g); transform: scale(var(--f)); transition: .5s;
}
img:hover { --f: 1.35; /* hover scale */
}

그것을 분해하자 mask 재산. 우선 유사한 radial-gradient() 인사말 background 재산은 거기에 있습니다. 새로운 변수를 만들었고, --_g, 일반적인 부분이 물건을 덜 어수선하게 만듭니다.

--_g: 50% / calc(100% / var(--f)) 100% no-repeat content-box; mask: radial-gradient( circle closest-side, #000 99%, #0000) var(--_g);

다음으로 linear-gradient() 거기에도:

--_g: 50% / calc(100% / var(--f)) 100% no-repeat content-box; mask: linear-gradient(#000 0 0) no-repeat 50% calc(-1 * var(--_o)) / calc(100% / var(--f) - 2 * var(--b)) 50%, radial-gradient( circle closest-side, #000 99%, #0000) var(--_g);

이렇게 하면 마스크의 직사각형 부분이 생성됩니다. 너비는 방사형 그래디언트의 너비에서 테두리 두께의 두 배를 뺀 것과 같습니다.

calc(100% / var(--f) - 2 * var(--b))

직사각형의 높이는 절반과 같습니다. 50%, 요소 크기.

또한 수평 중앙에 배치된 선형 그래디언트가 필요합니다(50%) 아웃라인의 오프셋과 동일한 값만큼 위쪽에서 오프셋됩니다. 다른 CSS 변수를 생성했습니다. --_o, 이전에 정의한 오프셋의 경우:

--_o: calc((1 / var(--f) - 1) * var(--s) / 2 - var(--b));

여기서 혼란스러운 것 중 하나는 부정 외곽선에 대한 오프셋(외부에서 내부로 이동)이지만 긍정적인 그라디언트에 대한 오프셋(위에서 아래로 이동). 오프셋을 곱하는 이유가 궁금하다면 --_o에 의해 -1, 이제 알았습니다!

다음은 마스크의 그라데이션 구성을 설명하는 데모입니다.

위를 가리키고 모든 것이 어떻게 함께 움직이는지 확인하십시오. 중간 상자는 두 개의 그라디언트로 구성된 마스크 레이어를 보여줍니다. 왼쪽 이미지의 보이는 부분이라고 상상하면 오른쪽에 최종 결과가 나타납니다!

최대 포장

끝났습니다! 멋진 호버 애니메이션으로 끝났을 뿐만 아니라 단일 HTML로 모든 작업을 수행했습니다. <img> 요소. 20줄 미만의 CSS 속임수입니다!

물론 우리는 이러한 복잡한 효과에 도달하기 위해 약간의 트릭과 수학 공식에 의존했습니다. 그러나 필요한 부분을 사전에 식별했기 때문에 무엇을 해야 하는지 정확히 알고 있었습니다.

더 많은 HTML을 허용했다면 CSS를 단순화할 수 있었을까요? 전적으로. 그러나 우리는 새로운 CSS 요령을 배우기 위해 여기에 있습니다! 이것은 CSS 그래디언트, 마스킹, outline 속성의 동작, 변형, 그리고 더 많은 것들이 있습니다. 어느 시점에서 길을 잃은 느낌이 든다면 반드시 확인하십시오. 내 시리즈 동일한 일반 개념을 사용합니다. 때로는 더 많은 예제와 사용 사례를 확인하여 요점을 파악하는 데 도움이 됩니다.

유명한 CSS 개발자의 사진을 사용한 마지막 데모를 보여드리겠습니다. 컬렉션에 추가할 수 있도록 자신의 이미지가 포함된 데모를 보여 주는 것을 잊지 마세요!

• SEO 기반 콘텐츠 및 PR 배포. 오늘 증폭하십시오.
• 플라토 블록체인. Web3 메타버스 인텔리전스. 지식 증폭. 여기에서 액세스하십시오.
• 출처: https://css-tricks.com/a-fancy-hover-effect-for-your-avatar/