CSS3를 사용하여 호버 밑줄 애니메이션을 만드는 방법

이 글에서는 주로 CSS3를 사용하여 hover 밑줄 애니메이션을 만드는 단계를 소개합니다. 매우 좋은 참조 값을 가지고 있습니다. 아래 에디터와 함께 살펴보겠습니다

1. 며칠 전 Hexo의next테마 제목 호버 효과를 봤는데 너무 멋있어서 써봤습니다. 나 자신, 그리고 다른 하나는 다음 구현을 위해 평소와 같이 위 그림

2. 작은 검은 기술을 실현하는 열쇠

 
 自己实现的hover效果 

는 hover가 없다는 점입니다. 너비를 0으로 정의하면 너비를 0에서 100%까지 변경할 수 있습니다.

왼쪽이 50%이므로 애니메이션의 시작 위치가 50%가 됩니다.

3. hexo next 테마 공식 구현

/* css样式 */ .demo1{ position: relative; text-decoration: none; font-size: 20px; color: #333; } .demo1:before{ content: ""; position: absolute; left: 50%; bottom: -2px; width: 0; height: 2px; background: #4285f4; transition: all .3s; } .demo1:hover:before{ width: 100%; left: 0; right: 0; }

이 구현의 핵심은 scale(0)에서 scale(1)로 변경된다는 것입니다.

CSS3의 스케일 변환 원점은 중간점이므로 애니메이션은 중간 위치에서 시작됩니다.

4. 둘의 차이점

다음 애니메이션이 투명한 그라데이션 효과를 주는 것도 애니메이션을 통해서 알 수 있는데, 이는 규모.

첫 번째 구현에서는 너비만 변경하지만 애니메이션을 사용하여 다음과 동일한 효과를 얻을 수도 있습니다.

위 내용은 CSS3를 사용하여 호버 밑줄 애니메이션을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!