이 기사의 내용은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!