반짝이는 애니메이션 버튼 - 단계별 가이드

HTML

HTML의 경우 버튼 요소가 하나만 있습니다.

<button>Button</button>

CSS

CSS의 경우 먼저 버튼의 스타일을 지정합니다.

테두리를 제거하고 1픽셀씩 반올림합니다.

그런 다음 배경을 녹색으로 설정하고 패딩을 추가하고 오버플로되는 모든 것을 숨기고 위치를 상대적으로 설정합니다.

button {
    border: none;
    border-radius: 1px;
    padding: 5px 20px;
    background: #00ffb3;
    position: relative;
    overflow: hidden;
}

이제 이전 의사 요소의 스타일을 지정합니다. 이 요소는 광택 효과를 생성합니다.

콘텐츠와 위치를 전체 높이와 너비 100픽셀의 절대값으로 설정합니다.

배경은 120도 회전된 선형 그래디언트이며 두 투명 사이에 흰색이 있습니다.

top을 0으로, left를 -100픽셀(요소의 너비)로 설정합니다.

button:before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100%;
    background-image: linear-gradient(
        120deg,
        rgba(255,255,255, 0) 30%,
        rgba(255,255,255, .8),
        rgba(255,255,255, 0) 70%
    );
    top: 0;
    left: -100px;
}

이제 우리는 애니메이션을 만들 것입니다.

왼쪽 속성을 0퍼센트에서 -100픽셀로 설정하고 애니메이션의 20퍼센트에서 100퍼센트로 설정합니다.

또한 요소가 원래 위치로 다시 이동하지 않도록 애니메이션의 100%~100%를 설정합니다.

@keyframes shine {
    0% {left: -100px}
    20% {left: 100%}
    100% {left: 100%}
}

이제 의사 요소 이전에 3초 지속 시간, 무한, 선형으로 애니메이션을 추가합니다.

button:before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100%;
    background-image: linear-gradient(
        120deg,
        rgba(255,255,255, 0) 30%,
        rgba(255,255,255, .8),
        rgba(255,255,255, 0) 70%
    );
    top: 0;
    left: -100px;
    animation: shine 3s infinite linear; /* Animation */
}

그리고 그게 다야.

비디오 자습서here에서 전체 코드를 찾을 수 있습니다.

읽어 주셔서 감사합니다. ❤️