끝없는 육각형 공간 효과를 얻기 위해 CSS와 D3를 사용하는 방법

이 글에서는 끝없는 육각형 공간 효과를 얻기 위해 CSS와 D3를 사용하는 방법을 소개합니다. 이는 좋은 참고 가치가 있으며 도움이 필요한 친구들에게 도움이 되기를 바랍니다.

효과 미리보기

코드 해석

돔 정의, 컨테이너에는 1과 5가 포함됩니다. <span></span> 的 <p></p>:

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

중앙 디스플레이:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, gold, black);
}

원형 외부 컨테이너의 크기 정의:

.container {
    width: 20em;
    height: 20em;
    font-size: 20px;
    border-radius: 50%;
}

직사각형 그리기 육각형 컨테이너:

.hexagons {
    width: inherit;
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hexagons span {
    position: absolute;
    width: calc(20em / 1.732);
    height: inherit;
    background-color: currentColor;
}

의사 요소를 사용하여 같은 크기의 직사각형을 2개 더 만들어 육각형을 만듭니다.

.hexagons span:before,
.hexagons span:after {
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;
    background-color: currentColor;
}

.hexagons span:before {
    transform: rotate(60deg);
}

.hexagons span:after {
    transform: rotate(-60deg);
}

육각형의 색상이 엇갈리게 나타나도록 합니다.

.hexagons span:nth-child(odd) {
    color: gold;
}

.hexagons span:nth-child(even) {
    color: #222;
}

설정 변수, 육각형이 점차 줄어들고 작은 육각형이 큰 육각형과 겹칩니다:

.hexagons span {
    transform: scale(var(--scale)) ;
}

.hexagons span:nth-child(1) {
    --scale: 1;
}

.hexagons span:nth-child(2) {
    --scale: calc(1 * 0.9);
}

.hexagons span:nth-child(3) {
    --scale: calc(1 * 0.9 * 0.9);
}

.hexagons span:nth-child(4) {
    --scale: calc(1 * 0.9 * 0.9 * 0.9);
}

.hexagons span:nth-child(5) {
    --scale: calc(1 * 0.9 * 0.9 * 0.9 * 0.9);
}

그런 다음 육각형이 다른 각도로 기울어지도록 변수를 설정합니다:

.hexagons span {
    transform: scale(var(--scale)) rotate(calc(var(--n) * 6deg));
}

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

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

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

.hexagons span:nth-child(4) {
    --n: 4;
}

.hexagons span:nth-child(5) {
    --n: 5;
}

애니메이션 효과 정의:

.hexagons {
    animation: twist 0.5s linear infinite;
}

@keyframes twist {
    from {
        transform: rotate(0deg) scale(1);
    }

    to {
        transform: rotate(calc(6deg * -2)) scale(1.25);
    }
}

컨테이너 외부의 콘텐츠 숨기기:

.container {
    overflow: hidden;
}

다음으로 d3를 사용하여 육각형을 만듭니다. 배치.
d3 라이브러리 소개:

<script></script>

d3를 사용하여 육각형 돔 요소 만들기:

const COUNT = 5;

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

d3를 사용하여 육각형의 --n 및 --scale 변수에 값 할당:

d3.select('.hexagons')
    .selectAll('span')
    .data(d3.range(COUNT))
    .enter()
    .append('span')
    .style('--scale', (d) => Math.pow(0.9, d))
    .style('--n', (d) => d + 1);

에서 육각형을 삭제합니다. HTML 파일 DOM 요소 및 CSS 파일에 선언된 변수.

마지막으로 육각형 수를 100으로 변경합니다.

const COUNT = 100;

끝났습니다!

관련 추천:

CSS를 사용하여 새를 그리는 방법(코드)

순수한 CSS를 사용하여 동적으로 움직이는 기차를 구현하는 방법

위 내용은 끝없는 육각형 공간 효과를 얻기 위해 CSS와 D3를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!