순수 CSS를 사용하여 공 점프 단계의 애니메이션 효과를 얻는 방법(소스 코드 첨부)

이 글의 내용은 순수 CSS를 사용하여 공 점프 스텝의 애니메이션 효과를 구현하는 방법에 관한 것입니다. (소스 코드 첨부) 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 도움이 됩니다.

효과 미리보기

소스코드 다운로드

https ://github.com/comehope/front-end-daily-challenges

코드 해석

Define dom, 컨테이너에는 5단계를 나타내는 5개 요소가 포함되어 있습니다. # 🎜🎜 #

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

중앙 디스플레이:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

컨테이너 크기 정의:

.loader {
    width: 7em;
    height: 5em;
    font-size: 40px;
}

5단계 그리기:

.loader {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.loader span {
    width: 1em;
    height: 1em;
    background-color: white;
}

변수 사용 5단계 낮은 것에서 높은 것으로 정렬됩니다:

.loader span {
    height: calc(var(--n) * 1em);
}

.loader span:nth-child(1) {
    --n: 1;
}

.loader span:nth-child(2) {
    --n: 2;
}

.loader span:nth-child(3) {
    --n: 3;
}

.loader span:nth-child(4) {
    --n: 4;
}

.loader span:nth-child(5) {
    --n: 5;
}

정렬 방향을 단계로 전환하는 애니메이션 효과를 추가합니다:

.loader span {
    animation: sort 5s infinite;
}

@keyframes sort {
    0%, 40%, 100% {
        height: calc(var(--n) * 1em);
    }

    50%, 90% {
        height: calc(5em - (var(--n) - 1) * 1em);
    }
}

아래에서 작은 공의 애니메이션이 다음을 사용하여 수행됩니다. 같은 색의 공 두 개가 교대로 움직이는 방식은 마치 하나의 공이 왕복하는 것처럼 보입니다.

의사 요소가 포함된 작은 공 2개 그리기:

.loader::before,
.loader::after {
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    background-color: white;
    border-radius: 50%;
    bottom: 1em;
}

.loader::before {
    left: 0;
}

.loader::after {
    left: 6em;
}

공이 위쪽으로 이동하도록 애니메이션 효과 추가:

.loader::before,
.loader::after {
    animation: climbing 5s infinite;
    visibility: hidden;
}

.loader::after {
    animation-delay: 2.5s;
}

@keyframes climbing {
    0% {
        bottom: 1em;
        visibility: visible;
    }

    10% {
        bottom: 2em;
    }

    20% {
        bottom: 3em;
    }

    30% {
        bottom: 4em;
    }

    40% {
        bottom: 5em;
    }

    50% {
        bottom: 1em;
    }

    50%, 100% {
        visibility: hidden;
    }
}

위로 이동 양쪽으로 이동 계단을 오르는 애니메이션 효과를 동시에 형성합니다:

.loader::before {
    --direction: 1;
}

.loader::after {
    --direction: -1;
}

@keyframes climbing {
    0% {
        bottom: 1em;
        left: calc(3em - 2 * 1.5em * var(--direction));
        visibility: visible;
    }

    10% {
        bottom: 2em;
        left: calc(3em - 1 * 1.5em * var(--direction));
    }

    20% {
        bottom: 3em;
        left: calc(3em - 0 * 1.5em * var(--direction));
    }

    30% {
        bottom: 4em;
        left: calc(3em + 1 * 1.5em * var(--direction));
    }

    40% {
        bottom: 5em;
        left: calc(3em + 2 * 1.5em * var(--direction));
    }

    50% {
        bottom: 1em;
        left: calc(3em + 2 * 1.5em * var(--direction));
    }

    50%, 100% {
        visibility: hidden;
    }
}

마지막으로 계단을 오르는 동작에 의인화 효과를 추가합니다:

@keyframes climbing {
    0% {
        bottom: 1em;
        left: calc(3em - 2 * 1.5em * var(--direction));
        visibility: visible;
    }

    7% {
        bottom: calc(2em + 0.3em);
    }

    10% {
        bottom: 2em;
        left: calc(3em - 1 * 1.5em * var(--direction));
    }

    17% {
        bottom: calc(3em + 0.3em);
    }

    20% {
        bottom: 3em;
        left: calc(3em - 0 * 1.5em * var(--direction));
    }

    27% {
        bottom: calc(4em + 0.3em);
    }

    30% {
        bottom: 4em;
        left: calc(3em + 1 * 1.5em * var(--direction));
    }

    37% {
        bottom: calc(5em + 0.3em);
    }

    40% {
        bottom: 5em;
        left: calc(3em + 2 * 1.5em * var(--direction));
    }

    50% {
        bottom: 1em;
        left: calc(3em + 2 * 1.5em * var(--direction));
    }

    50%, 100% {
        visibility: hidden;
    }
}

You 끝났어!

관련 권장 사항:

순수한 CSS를 사용하여 회전하는 자전거 바퀴의 애니메이션 효과를 얻는 방법

Pure CSS를 사용하여 깃발이 펄럭이는 것과 유사한 애니메이션 효과를 얻는 방법(소스 코드 첨부)

위 내용은 순수 CSS를 사용하여 공 점프 단계의 애니메이션 효과를 얻는 방법(소스 코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!