小編給大家分享一下怎么用CSS和D3實(shí)現(xiàn)一組彩燈，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括漳浦網(wǎng)站建設(shè)、漳浦網(wǎng)站制作、漳浦網(wǎng)頁(yè)制作以及漳浦網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，漳浦網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶(hù)以成都為中心已經(jīng)輻射到漳浦省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶(hù)的支持與信任！

代碼解讀

定義dom，容器中包含9個(gè)元素，代表9個(gè)數(shù)字：

<divclass="pi">

<span>3</span>

<span>1</span>

<span>4</span>

<span>1</span>

<span>5</span>

<span>9</span>

<span>2</span>

<span>6</span>

<span>5</span>

</div>

居中顯示：

body{

margin:0;

height:100vh;

display:flex;

align-items:center;

justify-content:center;

background-color:black;

}

定義容器尺寸：

.pi{

width:30em;

height:30em;

font-size:12px;

}

把9個(gè)數(shù)字布局成3*3的網(wǎng)格：

.pi{

display:grid;

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

grid-gap:0.2em;

}

.pispan{

color:white;

font-size:3em;

background-color:hsl(0,40%,40%);

font-family:sans-serif;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

user-select:none;

}

在dom中定義css變量，變量值等于該元素代表的數(shù)字：

<pclass="pi">

<spanstyle="--d:3">3</span>

<spanstyle="--d:1">1</span>

<spanstyle="--d:4">4</span>

<spanstyle="--d:1">1</span>

<spanstyle="--d:5">5</span>

<spanstyle="--d:9">9</span>

<spanstyle="--d:2">2</span>

<spanstyle="--d:6">6</span>

<spanstyle="--d:5">5</span>

</p>

為不同的數(shù)字設(shè)置不同的背景色：

.pispan{

--c:hsl(calc(var(--d)*36),40%,40%);

background-color:var(--c);

}

使數(shù)字的顏色與背景相同，在鼠標(biāo)懸停時(shí)，高度當(dāng)前的數(shù)字：

.pispan{

color:var(--c);

transition:0.3s;

}

.pispan:hover{

background-color:white;

color:black;

box-shadow:001emyellow;

}

至此，完成了視覺(jué)效果設(shè)計(jì)，接下來(lái)用d3批量處理dom元素和css變量。

引入d3庫(kù)：

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

刪除掉html文件中代表數(shù)字的dom元素，用d3創(chuàng)建代表數(shù)字的dom元素，并設(shè)置css變量：

constPI='314159265';

d3.select('.pi')

.selectAll('span')

.data(PI)

.enter()

.append('span')

.style('--d',(d)=>d)

.text((d)=>d);

把PI改為100位：

constPI='3141592653589793238462643383279502884197169399375105820974944592307816406286208998628034825342117067';

同時(shí)把網(wǎng)格改為10*10的布局：

.pi{

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

}

.pispan{

font-size:1.3em;

}

接下來(lái)制作循環(huán)點(diǎn)亮的效果。

為各數(shù)字元素增加css類(lèi)，數(shù)字0的類(lèi)名是d0，數(shù)字1的類(lèi)名是d2，以此類(lèi)推：

d3.select('.pi')

.selectAll('span')

.data(PI)

.enter()

.append('span')

.attr('class',(d)=>`d$ljius72`)

.style('--d',(d)=>d)

.text((d)=>d);

定義循環(huán)變量number，它從1開(kāi)始逐漸遞增：

letnumber=1;

定義一個(gè)函數(shù)，用于點(diǎn)亮特定數(shù)字的一組元素：

functionshow(){

d3.selectAll(`.pispan.d${number%10}`)

.classed('show',true);

d3.selectAll(`.pispan.d${(number-1)%10}`)

.classed('show',false);

number++;

}

最后，設(shè)置一個(gè)間隔時(shí)間，不斷重復(fù)調(diào)用上面這個(gè)函數(shù)，讓各組數(shù)字依次點(diǎn)亮：

setInterval(show,500);

以上是“怎么用CSS和D3實(shí)現(xiàn)一組彩燈”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞標(biāo)題：怎么用CSS和D3實(shí)現(xiàn)一組彩燈
本文路徑：http://aaarwkj.com/article34/gjgsse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、靜態(tài)網(wǎng)站、品牌網(wǎng)站制作、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)