使用CSS和D3實(shí)現(xiàn)黑白交疊的動(dòng)畫效果的方法？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),且末企業(yè)網(wǎng)站建設(shè),且末品牌網(wǎng)站建設(shè),網(wǎng)站定制,且末網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,且末網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

效果預(yù)覽

代碼解讀

定義 dom，容器中包含 3 個(gè)子元素，每個(gè)子元素代表一個(gè)圓：

居中顯示：

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

定義容器尺寸：

.circles {
    width: 60vmin;
    height: 60vmin;
}

畫出容器中的1個(gè)圓：

.circles {
    position: relative;
}

.circles span {
    position: absolute;
    box-sizing: border-box;
    width: 50%;
    height: 50%;
    background-color: white;
    border-radius: 50%;
    left: 25%;
}

定義變量，畫出多個(gè)圓，每個(gè)圓圍繞著第 1 個(gè)圓的底部中點(diǎn)旋轉(zhuǎn)，圍成一個(gè)更大的圓形：

.circles {
    --particles: 3;
}

.circles span {
    transform-origin: bottom center;
    --deg: calc(360deg / var(--particles) * (var(--n) - 1));
    transform: rotate(var(--deg));
}

.circles span:nth-child(1) {
    --n: 1;
}

.circles span:nth-child(2) {
    --n: 2;
}

.circles span:nth-child(3) {
    --n: 3;
}

為子元素增加動(dòng)畫效果：

.circles span {
    animation: rotating 5s ease-in-out infinite;
}

@keyframes rotating {
    0% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(var(--deg)) translateY(0);
    }

    100% {
        transform: rotate(var(--deg)) translateY(100%) scale(2);
    }
}

設(shè)置子元素混色模式，使子元素間交疊的部分顯示成黑色：

.circles span {
    mix-blend-mode: difference;
}

為容器增加動(dòng)畫效果，抵銷子元素放大，使動(dòng)畫流暢銜接：

.circles {
    animation: zoom 5s linear infinite;
}

@keyframes zoom {
    to {
        transform: scale(0.5) translateY(-50%);
    }
}

接下來用 d3 批量處理 dom 元素和 css 變量。
引入 d3 庫：

用 d3 為表示圓數(shù)量的變量賦值：

const COUNT_OF_PARTICLES = 30;

d3.select('.circles')
    .style('--particles', COUNT_OF_PARTICLES)

用 d3 生成 dom 元素：

d3.select('.circles')
    .style('--particles', COUNT_OF_PARTICLES)
    .selectAll('span')
    .data(d3.range(COUNT_OF_PARTICLES))
    .enter()
    .append('span');

用 d3 為表示子元素下標(biāo)的變量賦值：

d3.select('.circles')
    .style('--particles', COUNT_OF_PARTICLES)
    .selectAll('span')
    .data(d3.range(COUNT_OF_PARTICLES))
    .enter()
    .append('span')
    .style('--n', (d) => d + 1);

刪除掉 html 文件中的相關(guān) dom 元素和 css 文件中相關(guān)的 css 變量。

最后，把圓的數(shù)量調(diào)整為 30 個(gè)：

const COUNT_OF_PARTICLES = 30;

感謝各位的閱讀！看完上述內(nèi)容，你們對使用CSS和D3實(shí)現(xiàn)黑白交疊的動(dòng)畫效果的方法大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享名稱：使用CSS和D3實(shí)現(xiàn)黑白交疊的動(dòng)畫效果的方法-創(chuàng)新互聯(lián)
文章來源：http://weahome.cn/article/dcgche.html