CSS를 사용하여 움직이는 점의 애니메이션 효과를 얻는 방법-CSS 튜토리얼-php.cn

CSS를 사용하여 움직이는 점의 애니메이션 효과를 얻는 방법

不言

풀어 주다： 2018-08-03 10:08:56

원래의

3544명이 탐색했습니다.

이 기사의 내용은 CSS를 사용하여 점을 움직이는 애니메이션 효과를 얻는 방법에 대한 것입니다. 필요한 친구들이 참고할 수 있기를 바랍니다. . 돕다.

효과 미리보기

소스코드 다운로드# 🎜🎜#

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

코드 해석

DOM을 정의합니다. 컨테이너에는 5개의 요소가 포함되어 있으며 각 요소는 작은 공을 나타냅니다.

<p>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</p>

로그인 후 복사

가운데 표시:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, sienna, maroon);
}

로그인 후 복사

컨테이너 크기 정의:

.loader {
    width: 6em;
    height: 1em;
    font-size: 40px;
}

로그인 후 복사

# 🎜🎜# 점 그리기:

.loader {
    position: relative;
}

.loader span {
    position: absolute;
    width: 1em;
    height: 1em;
    background-color: white;
    border-radius: 50%;
    left: 5em;
}

로그인 후 복사

공이 오른쪽에서 왼쪽으로 움직이고 왼쪽에서 오른쪽으로 돌아오는 애니메이션 효과 정의:

.loader {
    --duration: 5s;
}

.loader span {
    animation: 
        walk linear infinite;
    animation-duration: var(--duration);
}

@keyframes walk {
    0%, 95%, 100% {
        left: 5em;
    }

    80%, 85% {
        left: 0;
    }
}

로그인 후 복사

더 많은 공 추가 애니메이션 효과 맨 왼쪽 끝에서 점프하고 맨 오른쪽 끝에서 아래로 떨어짐:

.loader span {
    animation: 
        walk linear infinite,
        jump linear infinite;
}

@keyframes jump {
    80%, 100% {
        top: 0;
    }

    85%, 95% {
        top: -1em;
    }
}

로그인 후 복사

왼쪽에서 오른쪽으로 돌아올 때 빠른 움직임으로 인해 공이 약간 평평해지도록 추가합니다. 효과: #🎜 🎜#

.loader span {
    animation: 
        walk linear infinite,
        jump linear infinite,
        squash linear infinite;
}

@keyframes squash {
    80%, 100% {
        width: 1em;
        height: 1em;
    }

    90% {
        width: 2em;
        height: 0.8em;
    }
}

로그인 후 복사

공 5개에 대한 변수 정의:

.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 {
    --dots: 5;
}

로그인 후 복사

애니메이션 지연 설정:# 🎜🎜#

.loader span {
    animation-delay: calc(var(--n) * var(--duration) / var(--dots) * -1);
}

로그인 후 복사

마지막으로 점의 크기를 더 작게 변경합니다.

.loader {
    font-size: 20px;
}

로그인 후 복사

끝났습니다!