怎么使用CSS和D3實現一個舞動的畫面

小編給大家分享一下怎么使用CSS和D3實現一個舞動的畫面，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

　　代碼解讀

　　定義dom，容器中包含1個.square子容器，子容器中包含4個<span>，每個<span>代表一個對角扇形：

　　<figureclass="container">

　　<divclass="square">

　　<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>不設寬高，只設邊框，其中第1個和第4個<span>只取左右邊框，第2個和第3個<span>只取上下邊框：

　　.squarespan{

　　display:block;

　　border:2.5emsolidtransparent;

　　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;

　　}

　　把邊框改為圓弧：

　　.squarespan{

　　border-radius:50%;

　　}

　　在子容器中用grid布局把4個<span>設置為2*2的網格：

　　.square{

　　display:grid;

　　grid-template-columns:repeat(2,1fr);

　　grid-gap:0.2em;

　　padding:0.1em;

　　}

　　旋轉4個<span>，使它們圍合成一個正方形，看起來像一個花朵，算式的結果是45度，寫成這樣是為了和接下來的動畫的算式的形式保持一致：

　　.squarespan{

　　transform:rotate(calc(45deg+90deg*0));

　　}

　　增加讓<span>旋轉的動畫，整個動畫過程旋轉4次，每次旋轉90度，4次旋轉之后即返回原位：

　　.squarespan{

　　animation:rotation2sease-in-outinfinite;

　　}

　　@keyframesrotation{

　　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));}

　　}

　　使其中2個<span>朝相反的方向運動：

　　.squarespan:nth-child(2),

　　.squarespan:nth-child(3){

　　animation-direction:reverse;

　　}

　　至此，一個.square子容器的動畫已經完成，接下來制作4個.square的動畫。

　　在dom中再增加3組.square子容器：

　　<figureclass="container">

　　<divclass="square">

　　<span></span>

　　<span></span>

　　<span></span>

　　<span></span>

　　</div>

　　<divclass="square">

　　<span></span>

　　<span></span>

　　<span></span>

　　<span></span>

　　</div>

　　<divclass="square">

　　<span></span>

　　<span></span>

　　<span></span>

　　<span></span>

　　</div>

　　<divclass="square">

　　<span></span>

　　<span></span>

　　<span></span>

　　<span></span>

　　</div>

　　</figure>

　　用grid布局把4個.square布局成網格狀，變量--columns是網格的邊長，即每邊有2個.square子容器：

　　.container{

　　display:grid;

　　--columns:2;

　　grid-template-columns:repeat(var(--columns),1fr);

　　}

　　現在看起來好像是有幾個黑色的小方塊在不停地移動，當dom元素越多時，動畫效果看起來就越壯觀，就像集體舞一樣，人越多越有氣勢。接下來用d3批量增加dom的元素。

　　引入d3庫：

　　<scriptsrc="https://d3js.org/d3.v5.min.js"></script>

　　聲明一個COLUMNS常量，表示網格的邊長：

　　constCOLUMNS=2;

　　刪除掉html文件中的.square子元素，改為用d3動態創建：

　　d3.select('.container')

　　.selectAll('p')

　　.data(d3.range(COLUMNS*COLUMNS))

　　.enter()

　　.append('p')

　　.attr('class','square');

　　繼續用連綴語法增加<span>子元素：

　　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一起動畫：

　　constCOLUMNS=4;

以上是“怎么使用CSS和D3實現一個舞動的畫面”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！