小編給大家分享一下怎么使用CSS和D3實(shí)現(xiàn)一個(gè)舞動(dòng)的畫面，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
成都創(chuàng)新互聯(lián)公司堅(jiān)信：善待客戶，將會成為終身客戶。我們能堅(jiān)持多年，是因?yàn)槲覀円恢笨芍档眯刨嚒Ｎ覀儚牟缓鲇瞥踉L客戶，我們用心做好本職工作，不忘初心，方得始終。10多年網(wǎng)站建設(shè)經(jīng)驗(yàn)成都創(chuàng)新互聯(lián)公司是成都老牌網(wǎng)站營銷服務(wù)商,為您提供網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、H5建站、網(wǎng)站制作、高端網(wǎng)站設(shè)計(jì)、重慶小程序開發(fā)服務(wù),給眾多知名企業(yè)提供過好品質(zhì)的建站服務(wù)。
代碼解讀
定義dom，容器中包含1個(gè).square子容器，子容器中包含4個(gè)，每個(gè)代表一個(gè)對角扇形：
居中顯示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:#222;
}
設(shè)置容器的尺寸單位，1em等于8px：
.container{
font-size:8px;
}
子容器中的4個(gè)不設(shè)寬高，只設(shè)邊框，其中第1個(gè)和第4個(gè)只取左右邊框，第2個(gè)和第3個(gè)只取上下邊框：
.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個(gè)設(shè)置為2*2的網(wǎng)格：
.square{
display:grid;
grid-template-columns:repeat(2,1fr);
grid-gap:0.2em;
padding:0.1em;
}
旋轉(zhuǎn)4個(gè)，使它們圍合成一個(gè)正方形，看起來像一個(gè)花朵，算式的結(jié)果是45度，寫成這樣是為了和接下來的動(dòng)畫的算式的形式保持一致：
.squarespan{
transform:rotate(calc(45deg+90deg*0));
}
增加讓旋轉(zhuǎn)的動(dòng)畫，整個(gè)動(dòng)畫過程旋轉(zhuǎn)4次，每次旋轉(zhuǎn)90度，4次旋轉(zhuǎn)之后即返回原位：
.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個(gè)朝相反的方向運(yùn)動(dòng)：
.squarespan:nth-child(2),
.squarespan:nth-child(3){
animation-direction:reverse;
}
至此，一個(gè).square子容器的動(dòng)畫已經(jīng)完成，接下來制作4個(gè).square的動(dòng)畫。
在dom中再增加3組.square子容器：
用grid布局把4個(gè).square布局成網(wǎng)格狀，變量--columns是網(wǎng)格的邊長，即每邊有2個(gè).square子容器：
.container{
display:grid;
--columns:2;
grid-template-columns:repeat(var(--columns),1fr);
}
現(xiàn)在看起來好像是有幾個(gè)黑色的小方塊在不停地移動(dòng)，當(dāng)dom元素越多時(shí)，動(dòng)畫效果看起來就越壯觀，就像集體舞一樣，人越多越有氣勢。接下來用d3批量增加dom的元素。
引入d3庫：
聲明一個(gè)COLUMNS常量，表示網(wǎng)格的邊長：
constCOLUMNS=2;
刪除掉html文件中的.square子元素，改為用d3動(dòng)態(tài)創(chuàng)建：
d3.select('.container')
.selectAll('p')
.data(d3.range(COLUMNS*COLUMNS))
.enter()
.append('p')
.attr('class','square');
繼續(xù)用連綴語法增加子元素：
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動(dòng)態(tài)聲明：
d3.select('.container')
.style('--columns',COLUMNS)
/*略*/
最后，把邊長改為4，即讓16個(gè).square一起動(dòng)畫：
constCOLUMNS=4;
以上是“怎么使用CSS和D3實(shí)現(xiàn)一個(gè)舞動(dòng)的畫面”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
重慶分公司
重慶分公司
