순수 CSS를 사용하여 링 회전 환상의 애니메이션 효과를 얻는 방법(소스 코드 첨부)

이 기사의 내용은 순수한 CSS를 사용하여 링 회전 환상의 애니메이션 효과를 얻는 방법에 대한 것입니다. 이는 특정 참고 가치가 있으므로 도움이 될 수 있습니다.

효과 미리보기

소스 코드 다운로드

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

코드 해석

dom 정의, 컨테이너에는 10개의 <div> 子元素，每个 <code><div> 子元素内还有一个 <code><span></span> 하위 요소가 포함됩니다.

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

컨테이너 크기 정의:

.container {
    width: 17em;
    height: 17em;
    font-size: 16px;
}

컨테이너와 동일하게 하위 요소의 크기 정의:

.container {
    position: relative;
}

.container div {
    position: absolute;
    width: inherit;
    height: inherit;
}

하위 요소 중앙에 작은 노란색 사각형 그리기:

.container div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.container span {
    position: absolute;
    width: 1em;
    height: 1em;
    background-color: yellow;
}

움직이도록 애니메이션 효과 추가 왼쪽과 오른쪽의 작은 사각형, 애니메이션 지속 시간은 그대로입니다. 나중에 사용할 것이므로 변수로 정의합니다:

.container span {
    --duration: 2s;
    animation: move var(--duration) infinite;
}

@keyframes move {
    0%, 100% {
        left: calc(10% - 0.5em);
    }

    50% {
        left: calc(90% - 0.5em);
    }
}

베지어 곡선을 사용하여 애니메이션의 시간 함수를 조정하여 작은 사각형이 다음과 같이 보이도록 합니다. 왼쪽과 오른쪽에서 뛰어다니기:

.container span {
    animation: move var(--duration) cubic-bezier(0.6, -0.3, 0.7, 0) infinite;
}

작은 사각형 변형 애니메이션을 추가하여 쪼그려 앉고 점프하는 의인화 효과처럼 보이게 만들기:

.container span {
    animation: 
        move var(--duration) cubic-bezier(0.6, -0.3, 0.7, 0) infinite,
        morph var(--duration) ease-in-out infinite;
}

@keyframes morph {
    0%, 50%, 100% {
        transform: scale(0.75, 1);
    }

    25%, 75% {
        transform: scale(1.5, 0.5);
    }
}

이 시점에서 블록 1개의 애니메이션이 완성됩니다. 다음으로 여러 블록의 애니메이션 효과를 설정합니다.

하위 요소에 대한 CSS 아래 첨자 변수 정의:

.container div:nth-child(1) { --n: 1; }
.container div:nth-child(2) { --n: 2; }
.container div:nth-child(3) { --n: 3; }
.container div:nth-child(4) { --n: 4; }
.container div:nth-child(5) { --n: 5; }
.container div:nth-child(6) { --n: 6; }
.container div:nth-child(7) { --n: 7; }
.container div:nth-child(8) { --n: 8; }
.container div:nth-child(9) { --n: 9; }

작은 사각형이 컨테이너 주위에 균등하게 분포되고 원을 형성하도록 하위 요소를 회전합니다.

.container p {
    transform: rotate(calc(var(--n) * 40deg));
}

애니메이션 지연을 설정합니다. 이제 작은 사각형 그룹처럼 보입니다. 원의 내부 가장자리에 대해 회전합니다(그러나 실제로 회전하는 요소는 없으며 뇌가 느끼는 회전은 환상입니다):

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

마지막으로 작은 사각형에 색을 칠하세요:

.container span {
    background-color: hsl(calc(var(--n) * 80deg), 100%, 70%);
}

완료! CSS에 대해 더 알고 싶다면 PHP 중국어 웹사이트의 css tutorial 칼럼에 가서 배워보세요.

관련 추천:

순수 CSS를 사용하여 태양, 지구, 달의 움직임 모델 애니메이션을 구현하는 방법

순수 CSS를 사용하여 축구장의 평면도를 구현하는 방법(소스 코드 첨부) )