代码解读

 

　　定义dom，容器中包含1个.square子容器，子容器中包含4个<span>，每个<span>代表一个对角扇形：

 

　　<figureclass="container">

 

　　<divclass="square">

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　</div>

 

　　</figure>

 

　　居中显示：

 

　　body{

 

　　margin:0;

 

　　height:100vh;

 

　　display:flex;

 

　　align-items:center;

 

　　justify-content:center;

 

　　background-color:#222;

 

　　}

 

　　设置容器的尺寸单位，1em等于8px：

 

　　.container{

 

　　font-size:8px;

 

　　}

 

　　子容器中的4个<span>不设宽高，只设边框，其中第1个和第4个<span>只取左右边框，第2个和第3个<span>只取上下边框：

 

　　

 

　　.squarespan{

 

　　display:block;

 

　　border:2.5emsolidtransparent;

 

　　color:#ddd;

 

　　}

 

　　.squarespan:nth-child(1),

 

　　.squarespan:nth-child(4){

 

　　border-left-color:currentColor;

 

　　border-right-color:currentColor;

 

　　}

 

　　.squarespan:nth-child(2),

 

　　.squarespan:nth-child(3){

 

　　border-top-color:currentColor;

 

　　border-bottom-color:currentColor;

 

　　}

 

　　把边框改为圆弧：

 

　　.squarespan{

 

　　border-radius:50%;

 

　　}

 

　　在子容器中用grid布局把4个<span>设置为2*2的网格：

 

　　.square{

 

　　display:grid;

 

　　grid-template-columns:repeat(2,1fr);

 

　　grid-gap:0.2em;

 

　　padding:0.1em;

 

　　}

 

　　旋转4个<span>，使它们围合成一个正方形，看起来像一个花朵，算式的结果是45度，写成这样是为了和接下来的动画的算式的形式保持一致：

 

　　.squarespan{

 

　　transform:rotate(calc(45deg+90deg*0));

 

　　}

 

　　增加让<span>旋转的动画，整个动画过程旋转4次，每次旋转90度，4次旋转之后即返回原位：

 

　　.squarespan{

 

　　animation:rotation2sease-in-outinfinite;

 

　　}

 

　　@keyframesrotation{

 

　　0%{transform:rotate(calc(45deg+90deg*0));}

 

　　25%{transform:rotate(calc(45deg+90deg*1));}

 

　　50%{transform:rotate(calc(45deg+90deg*2));}

 

　　75%{transform:rotate(calc(45deg+90deg*3));}

 

　　100%{transform:rotate(calc(45deg+90deg*4));}

 

　　}

 

　　使其中2个<span>朝相反的方向运动：

 

　　.squarespan:nth-child(2),

 

　　.squarespan:nth-child(3){

 

　　animation-direction:reverse;

 

　　}

 

　　至此，一个.square子容器的动画已经完成，接下来制作4个.square的动画。

 

　　在dom中再增加3组.square子容器：

 

　　

 

　　<figureclass="container">

 

　　<divclass="square">

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　</div>

 

　　<divclass="square">

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　</div>

 

　　<divclass="square">

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　</div>

 

　　<divclass="square">

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　</div>

 

　　</figure>

 

　　用grid布局把4个.square布局成网格状，变量--columns是网格的边长，即每边有2个.square子容器：

 

　　.container{

 

　　display:grid;

 

　　--columns:2;

 

　　grid-template-columns:repeat(var(--columns),1fr);

 

　　}

 

　　现在看起来好像是有几个黑色的小方块在不停地移动，当dom元素越多时，动画效果看起来就越壮观，就像集体舞一样，人越多越有气势。接下来用d3批量增加dom的元素。

 

　　引入d3库：

 

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

 

　　声明一个COLUMNS常量，表示网格的边长：

 

　　constCOLUMNS=2;

 

　　删除掉html文件中的.square子元素，改为用d3动态创建：

 

　　d3.select('.container')

 

　　.selectAll('p')

 

　　.data(d3.range(COLUMNS*COLUMNS))

 

　　.enter()

 

　　.append('p')

 

　　.attr('class','square');

 

　　继续用连缀语法增加<span>子元素：

 

　　d3.select('.container')

 

　　.selectAll('p')

 

　　.data(d3.range(COLUMNS*COLUMNS))

 

　　.enter()

 

　　.append('p')

 

　　.attr('class','square')

 

　　.selectAll('span')

 

　　.data(d3.range(4))

 

　　.enter()

 

　　.append('span');

 

　　删除掉css文件中的--columns变量声明，改为用d3动态声明：

 

　　d3.select('.container')

 

　　.style('--columns',COLUMNS)

 

　　/*略*/

 

　　最后，把边长改为4，即让16个.square一起动画：

 

　　constCOLUMNS=4;







本文转载自中文网