何使用CSS和D3實現(xiàn)一個舞動的畫面

1、何使用css和d3實現(xiàn)一個舞動的畫面代碼解讀定義dom，容器中包含1個.square子容器，子容器中包含4個，每個代表一個對角扇形：居中顯示：bodymargin:0;height:100vh;display:flex;align-items:center;justify-content:center;background-color:222;設(shè)置容器的尺寸單位，1em等于8px：.containerfont-size:8px;子容器中的4個不設(shè)寬高，只設(shè)邊框，其中第1個和第4個只取左右邊框，第2個和第3個只取上下邊框：.squarespandisplay:block;border:2.5em

2、solidtransparent;color:ddd;.squarespan:nth-child(1),.squarespan:nth-child(4)border-left-color:currentcolor;border-right-color:currentcolor;.squarespan:nth-child(2),.squarespan:nth-child(3)border-top-color:currentcolor;border-bottom-color:currentcolor;把邊框改為圓弧：.squarespanborder-radius:50%;在子容器中用grid布局

3、把4個設(shè)置為2*2的網(wǎng)格：.squaredisplay:grid;grid-template-columns:repeat(2,1fr);grid-gap:0.2em;padding:0.1em;旋轉(zhuǎn)4個，使它們圍合成一個正方形，看起來像一個花朵，算式的結(jié)果是45度，寫成這樣是為了和接下來的動畫的算式的形式保持全都：.squarespantransform:rotate(calc(45deg+90deg*0);增強讓旋轉(zhuǎn)的動畫，囫圇動畫過程旋轉(zhuǎn)4次，每次旋轉(zhuǎn)90度，4次旋轉(zhuǎn)之后即返回原位：.squarespananimation:rotation2sease-in-outinfinite;ke

4、yframesrotation0%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);使其中2個朝相反的方向運動：.squarespan:nth-child(2),.squarespan:nth-child(3)animation-direction:re

5、verse;至此，一個.square子容器的動畫已經(jīng)完成，接下來制作4個.square的動畫。在dom中再增強3組.square子容器：用grid布局把4個.square布局成網(wǎng)格狀，變量-columns是網(wǎng)格的邊長，即每邊有2個.square子容器：.containerdisplay:grid;-columns:2;grid-template-columns:repeat(var(-columns),1fr);現(xiàn)在看起來好似是有幾個黑色的小方塊在不停地移動，當(dāng)dom元素越多時，動畫效果看起來就越壯觀，就像集體舞一樣，人越多越有氣概。接下來用d3批量增強dom的元素。引入d3庫：聲明一個col

6、umns常量，表示網(wǎng)格的邊長：constcolumns=2;刪除掉html文件中的.square子元素，改為用d3動態(tài)創(chuàng)建：d3.select(&39;.container&39;).selectall(&39;p&39;).data(d3.range(columns*columns).enter().append(&39;p&39;).attr(&39;class&39;,&39;square&39;);繼續(xù)用連綴語法增強子元素：d3.select(&39;.container&39;).selectall(&39;p&39;).data(d3.range(columns*columns).enter().append(&39;p&39;).attr(&39;class&39;,&39;square&39;).selectall(&39;span&39;).data(d3.range(4).enter().append(&39;span&39;);刪除掉css文件中的-columns變量聲明，改為用d3動態(tài)聲明：d3.select(&39;.container&39;