"How Do You Make That? - 웹 애니메이션 분석"의 1부.

이 기사에서는 최근에 발견한 멋진 코드펜을 살펴볼 것입니다.


그것의. 그래서. 시원한! 그래서 제가 직접 만들어야 합니다.

코드를 간단히 살펴보면 몇 가지 멋진 점을 알 수 있습니다.

단 하나의 요소인 div가 있습니다!

그림자/빛나는 효과가 두 개의 의사 요소에서 나오는 것 같습니다.

참 복잡하네요...

자, 분해 시작하겠습니다!

1 - 풍부한 의사 요소

코드 중간쯤에서 내가 많이 작업하지 않은 것으로 이동해 보겠습니다. 의사 요소 :before 및 :after 입니다. 이 코드펜의 개발자는 이러한 선택기를 사용하여 단 하나의 요소로 이 놀라운 애니메이션을 완성했습니다. 어떻게?
:after: 및 :before는 HTML 태그로 요소를 명시적으로 선언하지 않고 페이지에 요소를 추가할 수 있습니다. This W3Schools example은 그것들을 이해하는 좋은 방법입니다.

이러한 가상 요소는 존재하지만 실제 HTML 요소가 아니기 때문에 이름이 지정되었습니다(DOM 함수 등으로 선택할 수 없음). 텍스트일 필요는 없으며 스타일일 수도 있습니다. 예를 들어 원본보다 약간 더 큰 의사 요소를 만들어 뒤에 놓을 수 있습니다.
중요한! z-index를 사용할 때 위치를 절대값으로 설정해야 합니다. 그래서 우리는 이 아름다움을 얻습니다:


괜찮아 보입니다. 그 섹시한 테두리를 어떻게 얻을 수 있습니까? 대답은 다음 두 줄에 있습니다.

left: -2px;
top: -2px;

예. 그래픽을 보면 이해가 됩니다.


따라서 -2px left는 다음과 같이 만듭니다.

-2px top은 다음과 같이 만듭니다.


대박! 기울기를 낮췄습니다. 이제 의사 요소를 그라데이션으로 만들면...

아름다운. 그러나 잠깐, codepen에는 :before 및 :after 가 모두 있지만 하나만 있습니다. 왜 그런 겁니까? 다음 부분에서 설명하겠습니다 ...

2 - 계산 + 필터 = 🤯

width: calc(100% + 4px);
height: calc(100% + 4px);

🤯🤯🤯
내가 어떻게 이것에 대해 몰랐습니까? 너무 멋져요. 기본적으로 이 코드는 이전 너비와 높이(부모 요소에서 100% 상속됨)를 취한 다음 4px를 추가합니다. 나는 이 기능이 Sass와 같은 포스트프로세서만을 위한 것이라고 생각했습니다!
이 코드를 개선할 수 있는 한 가지 방법은 4px를 (--border-width-gradient와 같은) 변수로 설정한 다음 오프셋에 대해 calc(--border-width-gradient / 2)를 설정하는 것입니다. 꽤 멋지죠?

이제 흐리게 처리합니다.
이전 정사각형 div를 사용하여 filter: blur(50px);를 쓸 수 있을 것 같았습니다.
우와.


그래디언트에서도 작동합니다!


대박! 이제 :before : 및 :after 가 모두 필요한 이유를 설명하겠습니다. 현재 가지고 있는 유일한 의사 요소를 흐리게 처리하면 다음과 같이 됩니다.



안좋다. 내 국경은 어디에 있습니까? 이 문제는 :before와 :after를 모두 같은 스타일로 만든 다음 하나를 흐리게 처리하여 쉽게 해결할 수 있습니다(전후).


전체 그림자를 볼 수 있도록 기본 div의 일부 여백을 하드코딩했습니다. 거기! 거의 끝났습니다.

3 - 그라디언트 및 애니메이션

@keyframes steam {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 400% 0;
    }
    100% {
        background-position: 0 0;
    }
}

이것은 코드의 멋진 부분입니다. 그라디언트 주위를 이동합니다. 배경 위치를 기억하는 경우:


그래디언트가 앞뒤로 이동하는 것처럼 보입니다. 그래디언트는 10가지 색상과 같기 때문에 이동할 공간이 충분합니다. :after, :before 선택기에 애니메이션이 적용되어 있으므로 그림자와 그라데이션이 동기화되어 이동합니다. 이제 우리가 해야 할 일은 배경을 어둡게 하고(빛나는 것처럼 보이게 하기 위해) 우리가 배운 모든 것을 모으는 것입니다.

또한 원래 div는 약간의 기울기가 있어서 바깥쪽으로 약간 구부러져 보입니다. 그냥 복사하겠습니다 😅

그리고 최종 결과는 다음과 같습니다!