怎么使用CSS和D3實現黑白交疊的動畫效果

這篇文章將為大家詳細講解有關怎么使用CSS和D3實現黑白交疊的動畫效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

　　代碼解讀

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

　　<divclass="circles">

　　<span></span>

　　<span></span>

　　<span></span>

　　</div>

　　居中顯示：

　　body{

　　margin:0;

　　height:100vh;

　　display:flex;

　　align-items:center;

　　justify-content:center;

　　background-color:black;

　　}

　　定義容器尺寸：

　　.circles{

　　width:60vmin;

　　height:60vmin;

　　}

　　畫出容器中的1個圓：

　　.circles{

　　position:relative;

　　}

　　.circlesspan{

　　position:absolute;

　　box-sizing:border-box;

　　width:50%;

　　height:50%;

　　background-color:white;

　　border-radius:50%;

　　left:25%;

　　}

　　定義變量，畫出多個圓，每個圓圍繞著第1個圓的底部中點旋轉，圍成一個更大的圓形：

　　.circles{

　　--particles:3;

　　}

　　.circlesspan{

　　transform-origin:bottomcenter;

　　--deg:calc(360deg/var(--particles)*(var(--n)-1));

　　transform:rotate(var(--deg));

　　}

　　.circlesspan:nth-child(1){

　　--n:1;

　　}

　　.circlesspan:nth-child(2){

　　--n:2;

　　}

　　.circlesspan:nth-child(3){

　　--n:3;

　　}

　　為子元素增加動畫效果：

　　.circlesspan{

　　animation:rotating5sease-in-outinfinite;

　　}

　　@keyframesrotating{

　　0%{

　　transform:rotate(0);

　　}

　　50%{

　　transform:rotate(var(--deg))translateY(0);

　　}

　　100%{

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

　　}

　　}

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

　　.circlesspan{

　　mix-blend-mode:difference;

　　}

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

　　.circles{

　　animation:zoom5slinearinfinite;

　　}

　　@keyframeszoom{

　　to{

　　transform:scale(0.5)translateY(-50%);

　　}

　　}

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

　　引入d3庫：

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

　　用d3為表示圓數量的變量賦值：

　　constCOUNT_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為表示子元素下標的變量賦值：

　　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文件中的相關dom元素和css文件中相關的css變量。

　　最后，把圓的數量調整為30個：

　　constCOUNT_OF_PARTICLES=30;

　　大功告成！

關于“怎么使用CSS和D3實現黑白交疊的動畫效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。