前端每日實(shí)戰(zhàn)：115# 視頻演示如何用 CSS 和 D3 創(chuàng)作一組 π 數(shù)字的彩燈

lauren_liuling 發(fā)布于2019-08-29 16:30 / 957人閱讀

摘要：可交互視頻此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。引入庫(kù)刪除掉文件中代表數(shù)字的元素，用創(chuàng)建代表數(shù)字的元素，并設(shè)置變量把改為位同時(shí)把網(wǎng)格改為的布局接下來(lái)制作循環(huán)點(diǎn)亮的效果。

效果預(yù)覽

按下右側(cè)的“點(diǎn)擊預(yù)覽”按鈕可以在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。

https://codepen.io/comehope/pen/XPbeKp

可交互視頻

此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。

請(qǐng)用 chrome, safari, edge 打開(kāi)觀看。

https://scrimba.com/p/pEgDAM/c79DRc4

源代碼下載

每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從 github 下載：

https://github.com/comehope/front-end-daily-challenges

代碼解讀

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

居中顯示：

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

.pi span {
    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ù)字：

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

.pi span {
    --c: hsl(calc(var(--d) * 36), 40%, 40%);
    background-color: var(--c);
}

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

.pi span {
    color: var(--c);
    transition: 0.3s;
}

.pi span:hover {
    background-color: white;
    color: black;
    box-shadow: 0 0 1em yellow;
}

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

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

const PI = "314159265";

d3.select(".pi")
    .selectAll("span")
    .data(PI)
    .enter()
    .append("span")
    .style("--d", (d) => d)
    .text((d) => d);

把 PI 改為100位：

const PI = "3141592653589793238462643383279502884197169399375105820974944592307816406286208998628034825342117067";

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

.pi {
    grid-template-columns: repeat(10, 1fr);
}

.pi span {
    font-size: 1.3em;
}

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

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

d3.select(".pi")
    .selectAll("span")
    .data(PI)
    .enter()
    .append("span")
    .attr("class", (d) => `d$yawccgq`)
    .style("--d", (d) => d)
    .text((d) => d);

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

let number = 1;

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

function show() {
    d3.selectAll(`.pi span.d${number % 10}`)
        .classed("show", true);
    d3.selectAll(`.pi span.d${(number-1) % 10}`)
        .classed("show", false);
    number++;
}

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

setInterval(show, 500);

大功告成！

云服務(wù)器 GPU云服務(wù)器如何用css 如何用vue開(kāi)發(fā)實(shí)時(shí)音視頻如何用云服務(wù)器和虛擬主機(jī)賺錢如何用國(guó)外的服務(wù)器呢

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/113789.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

lauren_liuling

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

河馬H2和螞蟻S19XP為何被世人稱為天花板

閱讀 3601·2021-11-23 09:51
HostNamaste：洛杉磯vps/達(dá)拉斯vps/紐約vps/法國(guó)vps/加拿大vps，1核/1G

閱讀 1473·2021-11-04 16:08
“RAK Cloud”雲(yún)服務(wù)器抄底鉅惠，不止3折?。?！

閱讀 3547·2021-09-02 09:54
Label的作用以及使用方法

閱讀 3616·2019-08-30 15:55
代碼高亮，highlight.js的調(diào)用方法及其問(wèn)題

閱讀 2594·2019-08-30 15:54
前端每日實(shí)戰(zhàn)：115# 視頻演示如何用 CSS 和 D3 創(chuàng)作一組 π 數(shù)字的彩燈

閱讀 958·2019-08-29 16:30
html+css+javascript學(xué)習(xí)記錄1

閱讀 2046·2019-08-29 16:15
對(duì)react-native-percentage-circle修改，實(shí)現(xiàn)圓環(huán)旋轉(zhuǎn)一定角度

閱讀 2317·2019-08-29 14:05

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

前端每日實(shí)戰(zhàn)：115# 視頻演示如何用 CSS 和 D3 創(chuàng)作一組 π 數(shù)字的彩燈

相關(guān)文章