아름다운 버튼 애니메이션

HTML

HTML의 경우 '회전' 클래스가 있는 버튼 요소 하나만 제공했습니다.

<button class="rotation">design</button>

CSS

CSS의 경우 먼저 '회전' 클래스에 일부 스타일을 설정합니다.

내부와 외부에 파란색 네온 그림자를 설정합니다.

그런 다음 텍스트 색상을 파란색으로 설정하고 버튼의 기본 테두리를 제거하고 5픽셀로 반올림합니다.

상대 위치에 배치하고 패딩을 추가하고 배경색을 흰색으로 설정합니다.

.rotation {
    background-color: #fff;
    box-shadow: 0 0 10px #5271ff,
            inset 0 0 10px #5271ff;
    color: #5e7cff;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    position: relative;
}

이제 의사 요소 이전 및 이후의 스타일을 지정합니다.

이러한 요소는 테두리로 버튼 주위를 회전합니다.

먼저 콘텐츠와 위치를 모든 면에서 -5px로 절대 위치로 설정하여 버튼보다 5px 더 크게 만듭니다.

5px의 테두리를 둥글게 만들고 2픽셀 너비의 밝은 파란색으로 설정합니다.

.rotation::before, .rotation::after {
    content: '';
    border: 2px solid #b5c3ff;
    border-radius: 5px;
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: -5px;
    right: -5px;
}

이제 의사 요소에 대한 애니메이션을 만듭니다.

클립 경로 속성을 사용하여 선형 회전 효과를 만듭니다.

@keyframes rotating {
    0% {clip-path: inset(96% 0 0 0);}
    20% {clip-path: inset(0 96% 0 0);}
    50% {clip-path: inset(0 0 96% 0);}
    75% {clip-path: inset(0 0 0 96%);}
    100% {clip-path: inset(96% 0 0 0);}
}

이제 의사 요소에 해당 애니메이션을 추가합니다.

지속 시간을 3초, 무한 및 선형으로 설정합니다.

.rotation::before, .rotation::after {
    content: '';
    border: 2px solid #b5c3ff;
    border-radius: 5px;
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: -5px;
    right: -5px;
    animation: rotating 3s infinite linear; /*  Animation  */
}

이제 의사 요소 이후에 반 시간(1.5초)의 애니메이션 지연을 추가하기만 하면 됩니다.

.rotation::after {
    animation-delay: 1.5s;
}

그리고 그게 다야.

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

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