这篇文章将为大家详细讲解有关怎么使用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实现黑白交叠的动画效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
