소개

div {
  width: 100px;
  height: 100px;
  background-image: linear-gradient(-45deg, peru, papayawhip);
  transition: 0.5s;
}

div:hover{
  background-image: linear-gradient(-45deg, peru, peru);
  transition: 0.5s;
}

이 코드에 어떤 문제가 있습니까? 그래디언트에서 솔리드 채우기에 이르기까지 훌륭하고 깨끗한 그래디언트 애니메이션을 만들어야 합니다. 작동해야 겠죠?

잘못된

background-image is not animatable.

개발자는 무엇을 해야 하나요? 나는 침대에 누워 가능성을 생각해 보았다. backgroundImage와 같은 Javascript DOM 함수 및 템플릿 리터럴을 사용하여 색상을 변경할 수 있습니다. RGB를 CMYK 함수로 사용하고 requestAnimationFrame을 호출할 수 있습니다. 또는 찾아볼 수 있습니다.
내가 찾았다 this.

이 StackOverflow 스레드가 제안하는 것은 기본적으로 background-size를 "200% 200%"(대상 창 크기의 두 배라고 가정)로 증가시킨 다음 여러 백분율 및 background-position를 사용하여 변환하는 것입니다.
시원한! 한동안 설명서를 읽은 후 다음과 같은 사실을 알아냈습니다.


물론 linear-gradient(145deg, red, blue)라고 가정합니다.

StackOverflow 코드와 배경 위치에 대한 새로운 지식을 바탕으로 단계를 밟았습니다.

그라데이션 쓰기

그라데이션 크기 증가

중심 그래디언트(50% 50%) 그래서 거의 동일하게 보임

background-position은 애니메이션이 가능하므로 각각 100% 100% 또는 0% 0%로 변환하여 더 파란색 또는 더 빨간색으로 보이게 합니다

.

예이! 문제 해결됨. 다음은 작동하는 데모입니다.


그러나 아마도 알 수 있듯이 완벽하지 않습니다. 100% 100%에는 여전히 약간의 붉은 색조가 있으며 파란색 배경에서 이 div는 확실히 눈에 띕니다. 또한 200% 배경 크기와 50% 배경 위치를 결합하면 이 나란히 비교에서 볼 수 있듯이 그라디언트가 약간 변경됩니다.


저처럼 완벽에 집착하는 개발자는 어떻게 해야 할까요? 과도한 브레인스토밍 끝에 다음과 같은 사실을 알아냈습니다.

background-size 애니메이션 가능

그라디언트를 red, blue, blue로 변경하면 한쪽 모서리가 완전히 파란색 부분이 됩니다.

이제 내 단계는 다음과 같습니다.

일반 그래디언트로 div 시작
*호버에서 다음 작업을 수행합니다.

배경 크기를 200%로 변경

배경 위치를 100%로 변경 100% (blue blue그라데이션의 일부)

빨간색과 파란색보다 더 멋진 색상 사용

코드를 만지작거리면서 호버에서 배경 크기를 변경할 필요가 없다는 것을 알았습니다. 처음부터 200%로 두는 것은 동일한 색상의 배경에서 div를 구별하는 데 실제로 도움이 되었습니다. 멋진 효과를 위해 빠른 상자 그림자도 추가했습니다.

그리고 여기 있습니다! 순수한 CSS로 성공적으로 애니메이션된 선형 그라데이션.



도움이 되는? 혼란스럽나요? 생각? 댓글을 남겨주세요!