CSSとD3を使って踊る絵を実現する方法（ソースコード添付）

この記事の内容はCSSとD3を使って踊る絵を実現する方法についてです(ソースコード添付)。お困りの方は参考にしていただければ幸いです。あなたに助けられました。

エフェクトのプレビュー

ソース コードのダウンロード

https://github.com/comehop​​e/front- end-daily-challenges

コード解釈

domを定義します。コンテナには1つの.squareサブコンテナが含まれ、サブコンテナには4つの、各 <code> は対角線のセクターを表します:

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

中央表示:

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

コンテナのサイズ単位を設定します、 1em は 8px に等しい:

.container {
    font-size: 8px;
}

サブコンテナ内の 4 つの <span></span> には幅と高さはなく、境界線のみが存在します。最初と 4 の <span></span> は左右の境界線のみを取得し、2 番目と 3 番目の <span></span> は上下の境界線のみを取得します:

.square span {
    display: block;
    border: 2.5em solid transparent;
    color: #ddd;
}

.square span:nth-child(1),
.square span:nth-child(4) {
    border-left-color: currentColor;
    border-right-color: currentColor;
}

.square span:nth-child(2),
.square span:nth-child(3) {
    border-top-color: currentColor;
    border-bottom-color: currentColor;
}

境界線を円弧に変更します:

.square span {
    border-radius: 50%;
}

サブコンテナのグリッド レイアウトを使用して、4 <span></span> を 2 * 2 グリッドに設定します:

.square {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0.2em;
    padding: 0.1em;
}

Rotate 4 <span></span>、正方形を形成し、花のように見えるようにします。次のアニメーションの式と一致するように、式の結果は 45 度になります。 ##

.square span {
    transform: rotate(calc(45deg + 90deg * 0));
}

を回転させるアニメーションを追加します。アニメーション プロセス全体が 90 度ずつ回転し、4 回転後に元の位置に戻ります。 #<pre class="brush:php;toolbar:false">.square span {     animation: rotation 2s ease-in-out infinite; } @keyframes rotation {     0% { transform: rotate(calc(45deg + 90deg * 0)); }     25% { transform: rotate(calc(45deg + 90deg * 1)); }     50% { transform: rotate(calc(45deg + 90deg * 2)); }     75% { transform: rotate(calc(45deg + 90deg * 3)); }     100% { transform: rotate(calc(45deg + 90deg * 4)); } }</pre>Make it 2

反対方向に移動します: <pre class="brush:php;toolbar:false">.square span:nth-child(2), .square span:nth-child(3) {     animation-direction: reverse; }</pre>この時点で、

.square

サブコンテナのアニメーションは次のようになります。以上が完了したら、次に #.square の ## アニメーションを 4 つ作成します。 dom に .square サブコンテナのグループをさらに 3 つ追加します。

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

グリッド レイアウトを使用して、4 つの .square をグリッドにレイアウトします。変数

--columns はグリッドの辺の長さです。つまり、各辺に 2 つの .square サブコンテナがあります:

.container {
    display: grid;
    --columns: 2;
    grid-template-columns: repeat(var(--columns), 1fr);
}

これで、小さな黒いものがいくつかあるように見えます。ブロックは常に動きます。DOM 要素が増えると、アニメーション効果はより華やかになり、人数が増えるほど迫力が増します。次に、d3 を使用して dom 要素をバッチで追加します。 d3 ライブラリを導入します:

<script></script>

グリッドの辺の長さを示す
COLUMNS

定数を宣言します:

const COLUMNS = 2;

HTML 内の .square を削除します。 file サブ要素。代わりに d3 を使用して動的に作成します:

d3.select('.container')
    .selectAll('p')
    .data(d3.range(COLUMNS * COLUMNS))
    .enter()
    .append('p')
    .attr('class', 'square');

引き続き連結構文を使用して サブ要素:

d3.select('.container')
    .selectAll('p')
    .data(d3.range(COLUMNS * COLUMNS))
    .enter()
    .append('p')
    .attr('class', 'square')
    .selectAll('span')
    .data(d3.range(4))
    .enter()
    .append('span');

CSS ファイルから削除します。 --columns 変数宣言では、代わりに d3 動的宣言を使用します。

d3.select('.container')
    .style('--columns', COLUMNS)
    /*略*/

最後に、辺の長さを 4 に変更します。つまり、16 にします。 .square 一緒にアニメーション化する :

const COLUMNS = 4;

完了!

以上がCSSとD3を使って踊る絵を実現する方法（ソースコード添付）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。