CSS と D3 を使用して無限の六角形の空間の効果を実現する方法

この記事では、CSS と D3 を使用して無限の六角形の空間の効果を実現する方法を紹介します。これは非常に参考になるので、困っている友人の助けになれば幸いです。

効果のプレビュー

コード解釈

domを定義、コンテナには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 を使用して六角形の dom 要素を作成します:

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 に変更します:

rreee

これで完了です。

関連する推奨事項:

CSS (コード) を使用して鳥を描く方法

純粋な CSS を使用して動的に動く電車を実装する方法

以上がCSS と D3 を使用して無限の六角形の空間の効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。