代码解读

 

　　定义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;

 

　　大功告成！






本文转载自中文网