CSS와 D3를 사용하여 흑백이 겹치는 애니메이션 효과를 얻는 방법

이 기사의 내용은 CSS와 D3를 사용하여 흑백 겹치는 애니메이션 효과를 얻는 방법에 대한 것입니다. 이 기사에서는 이에 대한 이해를 js에 소개하고 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 도움이됩니다.

효과 미리보기

코드 해석

돔 정의, 컨테이너에는 3개의 하위 요소가 포함되어 있으며 각 하위 요소는 원을 나타냅니다.

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

중앙 디스플레이:

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

컨테이너 크기 정의:

.circles {
    width: 60vmin;
    height: 60vmin;
}

컨테이너 그리기 1개의 원:

.circles {
    position: relative;
}

.circles span {
    position: absolute;
    box-sizing: border-box;
    width: 50%;
    height: 50%;
    background-color: white;
    border-radius: 50%;
    left: 25%;
}

변수를 정의하고 여러 개의 원을 그립니다. 각 원은 첫 번째 원의 하단 중간점을 중심으로 회전하여 더 큰 원을 형성합니다.

.circles {
    --particles: 3;
}

.circles span {
    transform-origin: bottom center;
    --deg: calc(360deg / var(--particles) * (var(--n) - 1));
    transform: rotate(var(--deg));
}

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

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

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

하위 요소에 애니메이션 효과 추가:

.circles span {
    animation: rotating 5s ease-in-out infinite;
}

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

    50% {
        transform: rotate(var(--deg)) translateY(0);
    }

    100% {
        transform: rotate(var(--deg)) translateY(100%) scale(2);
    }
}

하위 요소 색상 혼합 설정 하위 요소 사이에 겹치는 부분이 검은색으로 표시되도록 모드:

.circles span {
    mix-blend-mode: difference;
}

컨테이너에 애니메이션 효과를 추가하여 하위 요소의 확대를 상쇄하고 애니메이션이 원활하게 연결되도록 하기:

.circles {
    animation: zoom 5s linear infinite;
}

@keyframes zoom {
    to {
        transform: scale(0.5) translateY(-50%);
    }
}

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

<script></script>

d3를 사용하여 원 수를 나타내는 변수에 값 할당:

const COUNT_OF_PARTICLES = 30;

d3.select('.circles')
    .style('--particles', COUNT_OF_PARTICLES)

d3를 사용하여 dom 요소 생성:

d3.select('.circles')
    .style('--particles', COUNT_OF_PARTICLES)
    .selectAll('span')
    .data(d3.range(COUNT_OF_PARTICLES))
    .enter()
    .append('span');

d3를 사용하여 아래 첨자를 나타내는 변수에 값 할당 하위 요소:

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

html 파일 삭제 CSS 파일의 관련 DOM 요소 및 관련 CSS 변수.

마지막으로 원 수를 30으로 조정합니다.

const COUNT_OF_PARTICLES = 30;

끝났습니다!

관련 권장 사항:

순수한 CSS를 사용하여 DOM 요소 없이 애니메이션 효과를 구현하는 방법

순수한 CSS를 사용하여 움직이는 흰 토끼 애니메이션 효과를 구현하는 방법

CSS를 사용하여 트럭 로더를 구현하는 방법 효과

위 내용은 CSS와 D3를 사용하여 흑백이 겹치는 애니메이션 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!