CSS를 사용하여 호버에 확장 테두리를 만드는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS를 사용하여 호버에 확장 테두리를 만드는 방법은 무엇입니까?

Patricia Arquette

풀어 주다： 2024-11-16 12:55:03

원래의

866명이 탐색했습니다.

How to Create an Expanding Border on Hover with CSS?

CSS를 사용하여 마우스 오버 시 테두리 확장

마우스를 위에 올리면 테두리가 확장되는 것을 원합니다. 이 효과를 얻기 위한 대체 접근 방식은 다음과 같습니다.

CSS 변환 속성, 특히 변환:scaleX()를 사용하면 테두리 요소의 크기를 조정할 수 있습니다.

h1 {
  display: inline-block;
}

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

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

로그인 후 복사

이 접근 방식에서는 텍스트 콘텐츠에 영향을 주지 않도록 의사 요소(::after)에 변환 및 전환 속성을 적용하고 필요한 마크업을 추가하세요.

테두리를 확장하려면 왼쪽 또는 오른쪽으로, 그에 따라 변환 원본 속성을 조정합니다.

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

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

로그인 후 복사

변형 원본을 사용자 정의하여 테두리 확장 방향을 제어할 수 있습니다.

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