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

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

代碼解讀

定義dom，容器中包含9個元素，代表9個數(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個數(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ù)字設置不同的背景色：

.pispan{

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

background-color:var(--c);

}

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

.pispan{

color:var(--c);

transition:0.3s;

}

.pispan:hover{

background-color:white;

color:black;

box-shadow:001emyellow;

}

至此，完成了視覺效果設計，接下來用d3批量處理dom元素和css變量。

引入d3庫：

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

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

constPI='314159265';

d3.select('.pi')

.selectAll('span')

.data(PI)

.enter()

.append('span')

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

.text((d)=>d);

把PI改為100位：

constPI='3141592653589793238462643383279502884197169399375105820974944592307816406286208998628034825342117067';

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

.pi{

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

}

.pispan{

font-size:1.3em;

}

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

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

d3.select('.pi')

.selectAll('span')

.data(PI)

.enter()

.append('span')

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

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

.text((d)=>d);

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

letnumber=1;

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

functionshow(){

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

.classed('show',true);

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

.classed('show',false);

number++;

}

最后，設置一個間隔時間，不斷重復調用上面這個函數(shù)，讓各組數(shù)字依次點亮：

setInterval(show,500);

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

新聞標題：怎么用CSS和D3實現(xiàn)一組彩燈
本文路徑：http://vcdvsql.cn/article34/gjgsse.html

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

廣告

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