使用CSS和D3實(shí)現(xiàn)黑白交疊的動(dòng)畫效果的方法?這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容,讓我們一起來看看吧!
網(wǎng)站建設(shè)哪家好,找創(chuàng)新互聯(lián)!專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了晉安免費(fèi)建站歡迎大家使用!
定義 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 庫(kù):
用 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)容,你們對(duì)使用CSS和D3實(shí)現(xiàn)黑白交疊的動(dòng)畫效果的方法大概了解了嗎?希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。