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