CSS와 D3를 사용하여 사이클로이드 스윙 효과 애니메이션을 구현하는 방법

이 기사의 내용은 CSS와 D3를 사용하여 사이클로이드 스윙 효과 애니메이션을 구현하는 방법에 대한 것입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

효과 미리보기

코드 해석

돔 정의, 컨테이너에는 3개의 사이클로이드를 나타내는 3개의 요소가 포함됩니다.

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

중앙 디스플레이:

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

컨테이너의 크기를 정의하고 고정된 사이클로이드를 그립니다. 벽에 신호를 보냅니다. :

.pendulums {
    width: 40em;
    height: 30em;
    font-size: 10px;
    border-top: 0.3em solid cadetblue;
}

사이클로이드 그리기:

.pendulums {
    position: relative;
}

.pendulums span {
    position: absolute;
    width: 0.2em;
    height: 15em;
    background-color: cadetblue;
    left: 50%;
}

의사 요소를 사용하여 사이클로이드 바닥에 매달려 있는 작은 공 그리기:

.pendulums span::before {
    content: '';
    position: absolute;
    width: 1.5em;
    height: 1.5em;
    background: steelblue;
    border-radius: 50%;
    top: 100%;
    left: -0.75em;
}

방사형 그라디언트를 사용하여 작은 공에 빛과 그림자 추가:

.pendulums span::before {
    background: radial-gradient(
        circle at 70% 35%,
        white,
        darkturquoise 30%,
        steelblue 50%
    );
}

의사 요소를 사용하여 작은 공 그리기 공의 그림자:

.pendulums span::after {
    content: '';
    position: absolute;
    width: 2em;
    height: 0.3em;
    background-color: rgba(0, 0, 0, 0.2);
    top: 120%;
    left: -1em;
    filter: blur(0.4em);
}

사이클로이드의 꼭지점을 원점으로 삼아 사이클로이드를 왼쪽으로 회전:

.pendulums span {
    transform-origin: 50% top;
    transform: rotate(25deg);
}

사이클로이드가 흔들리게 하기:

.pendulums span {
    animation: swing ease-in-out infinite;
    animation-duration: 1.5s;
}

@keyframes swing {
    50% {
        transform: rotate(-25deg);
    }
}

각 사이클로이드에 대한 첨자 변수 정의:

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

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

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

변수로 설정 사이클로이드의 길이와 애니메이션의 지속 시간은 둘 다 점차적으로 증가하는 산술 수열입니다:

.pendulums span {
    height: calc((var(--n) - 1) * 1em + 15em);
    animation-duration: calc((var(--n) - 1) * 0.02s + 1.5s);
}

다음으로 d3를 사용하여 DOM 요소와 CSS 변수를 일괄 처리합니다.
d3 라이브러리 소개:

<script></script>

d3를 사용하여 사이클로이드 DOM 요소 생성:

const COUNT = 3;

d3.select('.pendulums')
    .selectAll('span')
    .data(d3.range(COUNT))
    .enter()
    .append('span')

d3를 사용하여 사이클로이드의 첨자 변수 정의:

d3.select('.pendulums')
    .selectAll('span')
    .data(d3.range(COUNT))
    .enter()
    .append('span')
    .style('--n', (d) => d + 1);

html 파일에서 관련 dom 정의와 css 파일에서 변수 정의를 삭제합니다.

마지막으로 사이클로이드 수를 15로 조정합니다.

const COUNT = 15;

관련 권장 사항:

CSS를 사용하여 롤러코스터 로더의 애니메이션 효과를 얻는 방법

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

위 내용은 CSS와 D3를 사용하여 사이클로이드 스윙 효과 애니메이션을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!