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

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

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

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

 <!-- html结构 -->
 <p>
     <a>自己实现的hover效果</a>
 </p>

rrree

는 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;
        }

rrree

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

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

4. 둘의 차이점

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

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

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