롤러코스터 로더의 애니메이션 효과를 구현하기 위해 CSS를 사용하는 방법

이 기사의 내용은 CSS를 사용하여 롤러코스터 로더의 애니메이션 효과를 구현하는 방법에 대한 내용입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

효과 미리보기

코드 해석

돔 정의, 컨테이너에는 3개의 점을 나타내는 3개의 요소가 포함되어 있습니다:

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

중앙 디스플레이:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right, silver, teal);
}

대관람차의 직경 정의, 기타 길이는 다음 값을 기준으로 합니다.

.loader {
    --diameter: 10em;
}

컨테이너 크기를 정의합니다. 너비는 높이의 2배입니다.

.loader {
    --width: calc(var(--diameter) * 2);
    width: var(--width);
    height: var(--diameter);
}

의사 요소의 공유 속성을 정의합니다.

.loader {
    position: relative;
}

.loader::before,
.loader::after {
    content: '';
    position: absolute;
    bottom: 0;
}

하단 트랙을 그리고 선 두께를 정의합니다. 변수 :

.loader {
    --stroke-width: calc(var(--diameter) / 40);
    color: white;
}

.loader::before {
    width: inherit;
    height: var(--stroke-width);
    background-color: currentColor;
}

중앙에 원형 궤도 그리기:

.loader::after {
    box-sizing: border-box;
    width: var(--diameter);
    height: var(--diameter);
    border: var(--stroke-width) solid;
    border-radius: 50%;
    left: 25%;
}

점을 그리고 점의 직경을 나타내는 변수 정의:

.loader {
    --dot-diameter: calc(var(--diameter) / 10);
}

.loader span {
    position: absolute;
    width: var(--dot-diameter);
    height: var(--dot-diameter);
    background-color: currentColor;
    border-radius: 50%;
    bottom: var(--stroke-width);
    left: calc((var(--width) - var(--dot-diameter)) / 2);
}

점이 원형 궤도를 따라 회전하도록 애니메이션 효과 추가:

.loader span {
    animation:
        rotating 2s linear infinite;
    --vertical-center: calc((var(--diameter) / 2 - var(--stroke-width) - var(--dot-diameter)) * -1);
    transform-origin: 50% var(--vertical-center);
}

@keyframes rotating {
    0%, 10% {
        transform: rotate(0deg);
    }

    60%, 100% {
        transform: rotate(-1turn);
    }
}

Add 점에 움직이는 애니메이션 효과:

.loader span {
    animation:
        run 2s linear infinite,
        rotating 2s linear infinite;
}

@keyframes run {
    0% {
        left: calc(var(--dot-diameter) * -1);
    }

    10%, 60% {
        left: calc((var(--width) - var(--dot-diameter)) / 2);
    }

    70%, 100% {
        left: calc(var(--width));
    }
}

다른 2개의 점에 애니메이션 지연을 설정하여 3개의 점이 서로 옆에 있는 3개의 마차처럼 보이도록 합니다.

.loader span:nth-child(1) {
    animation-delay: 0.075s;
}

.loader span:nth-child(2) {
    animation-delay: 0.15s;
}

마지막으로 컨테이너 외부에 숨깁니다. 내용:

.loader {
    overflow: hidden;
}

추천 관련 기사:

내비게이션 전환을 구현하는 CSS 코드 예시

순수한 CSS를 사용하여 녹색 돼지 효과를 구현하는 방법

css3 이동 메뉴 버튼(메뉴) 효과를 구현하기

위 내용은 롤러코스터 로더의 애니메이션 효과를 구현하기 위해 CSS를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!