如何使用CSS和D3实现一个舞动的画面

2024-01-17 11:26 小编
    源代码下载
    https://github.com/comehope/front-end-daily-challenges
    代码解读
    定义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;


Tag: 如何
在线咨询 拨打电话

电话

13363039260

内部绝密传真282期

微信二维码