Adam Argyle ' s 아픈 마우스 아웃 CSS 호버 효과

Codepen을 탐색하면서 나는 Adam Argyle의 매력적인 CSS 호버 효과를 우연히 발견했습니다. 데모의 앱과 같은 느낌, 특히 배경색이 왼쪽에서 오른쪽으로 부드럽게 전환 된 다음 오른쪽으로 왼쪽으로 나가면 즉시 주목을 받았습니다. 나는 그것을 재현하는 동안 좋은 시간을 보냈다.

저의 초기 접근 방식은 배경 전환, background-size 및 background-position 조작에 중점을 두었습니다. 그러나 나는 원하는 양방향 운동을 달성 할 수 없었다.

다음으로 CSS 변환을 탐구했습니다. scaleX() 잠재력을 제공했지만 링크 요소에 직접 적용하면 컨텐츠가 변경되지 않은 결과가 변경되었습니다. 솔루션? 의사 요소!

내 구현은 다음과 같습니다.

먼저, 기본 스타일 :

 A {
  위치 : 상대;
}

A :: 이전 {
  배경 : #ff9800;
  콘텐츠: "";
  삽입 : 0;
  위치 : 절대;
  변환 : scalex (0);
  전환 : .5를 쉽게 변환합니다.
  Z- 인덱스 : -1;
}

이것은 링크 내에 절대적으로 배치 된 주황색 배경으로 의사 요소 ( ::before )를 만듭니다. transform: scaleX(0); 처음에는 그것을 숨기고 transition 부드러운 애니메이션을 보장합니다.

호버 효과가 정의됩니다.

 A : 호버 :: 이전 {
  변환 : scalex (1);
  변환-오리진 : 맞습니다.
}

호버에서 scaleX(1) 의사 요소를 확장하고 결정적으로 transform-origin: right; 확장 지점을 오른쪽으로 설정합니다. 이것은 마우스 아웃 동작의 핵심입니다.

마법은 transition 의 상호 작용과 transform-origin 의 변화에 ​​있습니다. 전환은 호버에서 0에서 1까지 scaleX() 부드럽게 애니메이션하고 마우스 아웃에서 다시 다시 돌아옵니다. 호버에서 left (기본값)으로 transform-origin right 이동은 매끄럽고 양방향 효과를 위해 애니메이션 방향을 되돌립니다. 처음에 나는 이것으로 어려움을 겪었지만 transform-origin 속성은 누락 된 작품으로 판명되었습니다.

영감을 주신 Adam Argyle에게 감사합니다! 이 효과는 창의적으로 사용될 때 간단한 CSS 기술의 힘을 보여줍니다.

위 내용은 Adam Argyle ' s 아픈 마우스 아웃 CSS 호버 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!