호버에서 테두리 하단의 애니메이션 확장을 만드는 방법은 무엇입니까?

호버 효과: 테두리 하단의 애니메이션 확장

이 질문의 목표는 마우스를 가져갈 때 요소의 하단 테두리를 확장하는 호버 효과를 만드는 것입니다. 이 효과를 얻으려면 변형 속성을 활용하고 마우스를 올리면 0에서 1로 전환할 수 있습니다.

h1 {
  color: #666;
  display: inline-block;
  margin: 0;
  text-transform: uppercase;
}

h1:after {
  display: block;
  content: '';
  border-bottom: solid 3px #019fb6;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
}

h1:hover:after {
  transform: scaleX(1);
}

이 접근 방식은 의사 요소를 사용하여 텍스트에서 테두리 전환을 분리하고 원본 HTML을 유지합니다. 구조. 아래 그림과 같이 변환 원본 속성을 조작하여 다양한 방향에서 테두리를 확장할 수 있습니다.

<h1></h1>

h1.fromRight:after {
  transform-origin: 100% 50%;
}

h1.fromLeft:after {
  transform-origin: 0% 50%;
}

위 내용은 호버에서 테두리 하단의 애니메이션 확장을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!