源代码下载

    https://github.com/comehope/front-end-daily-challenges

    代码解读

    定义dom，容器中包含9个子元素：

    <divclass='container'>

    <span></span>

    <span></span>

    <span></span>

    <span></span>

    <span></span>

    <span></span>

    <span></span>

    <span></span>

    <span></span>

    </div>

    居中显示：

    body{

    margin:0;

    height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    background-color:black;

    }

    设置容器中子元素的布局方式，形成一个3*3的网格，其中--columns是网格每一边上的子元素数量：

    .container{

    display:grid;

    --columns:3;

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

    }

    定义子元素样式：

    .containerspan{

    width:25px;

    height:25px;

    color:lime;

    background-color:currentColor;

    }

    增加子元素的动画效果，总动画时长是5秒，其中第1秒（0%~20%）有动画，其余4秒（20%~100%）静止：

    .containerspan{

    transform:scale(0);

    animation:spin5slinearinfinite;

    }

    @keyframesspin{

    0%{

    transform:rotate(0deg)scale(1);

    }

    5%,15%{

    transform:rotate(90deg)scale(0);

    background:white;

    }

    17.5%{

    transform:rotate(180deg)scale(1);

    background-color:currentColor;

    }

    20%,100%{

    transform:rotate(90deg)scale(0);

    }

    }

    设置动画延时，使各子元素的动画随机延时4秒之内的任意时间：

    .containerspan{

    animation-delay:calc(var(--delay)*1s);

    }

    .containerspan:nth-child(1){--delay:0.8}

    .containerspan:nth-child(2){--delay:0.2}

    .containerspan:nth-child(3){--delay:1.9}

    .containerspan:nth-child(4){--delay:3.9}

    .containerspan:nth-child(5){--delay:2.8}

    .containerspan:nth-child(6){--delay:3.5}

    .containerspan:nth-child(7){--delay:1.5}

    .containerspan:nth-child(8){--delay:2.3}

    .containerspan:nth-child(9){--delay:1.7}

    至此，静态效果完成，接下来批量处理dom元素。

    引入d3库：

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

    删除掉css文件中的--columns变量声明，用d3为变量赋值：

    constCOLUMNS=3;

    d3.select('.container')

    .style('--columns',COLUMNS);

    删除掉html文件中的<span>子元素，用d3动态生成：

    d3.select('.container')

    .style('--columns',COLUMNS)

    .selectAll('span')

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

    .enter()

    .append('span');

    删除掉css文件中的--delay变量声明，用d3为变量生成随机数：

    d3.select('.container')

    .style('--columns',COLUMNS)

    .selectAll('span')

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

    .enter()

    .append('span')

    .style('--delay',()=>Math.random()*4);

    最后，把边长改为15，生成更多的子元素，加强视觉效果：

    constCOLUMNS=15;






本文转载自中文网