居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:skyblue;}设置容器大小，其中--side-length是方阵每边的元素数：.container{--side-length:2;位置：相对；宽度：calc(40px*calc(var(--side-length)));height:calc(40px*calc(var(--side-length)));}使用网格布局排列子元素，4个元素排列成2*2方阵：.container.horizo??ntal,.container.vertical{position:absolute;顶部：0；左：0；显示：网格；grid-template-columns:repeat(var(--side-length),1fr);}设置子元素的样式，.horizo??ntal里面的子元素是横条，.vertical里面的子元素是竖条：。容器.horizo??ntalspan{width:40px;高度：10px；背景：#fff；margin:15px0;}.container.verticalspan{width:10px;高度：40px；背景：#fff；margin:015px;}至此，静态布局就完成了，接下来导入带有d3批处理子元素的d3库：删除html文件中的子元素dom节点，删除css文件中声明的css变量。定义方阵每一边的元素个数，并将这个值赋给css变量：constSIDE_LENGTH=2;letcontainer=d3.select('.container').style('--side-length',边长）；定义一个添加span子元素的函数，分别添加水平和垂直子元素：enter().append('span');}appendSpan('.horizo??ntal');appendSpan('.vertical');此时布局已经改为动态，可以通过修改SIDE_LENGTH的值来创建不同边长的方阵，例如下面语句将创建一个5*5的方阵：constSIDE_LENGTH=5;接下来，使用GSAP创建动画。（注：由于scrimba在使用gsap时会crash，所以视频demo使用的是css动画，但是codepen和github都使用了gsap动画）引入GSAP库：声明动画变量animation，声明表示dom元素的变量$horizo??ntalSpan和$verticalSpan：letanimation=newTimelineMax({repeat:-1});let$horizo??ntalSpan='.container.horizo??ntalspan';let$verticalSpan='.container.verticalspan';先创建单杠的动画，分4步。每个to语句的最后一个参数是步骤的名称：动画。to($horizo??ntalSpan,1,{rotation:45},'step1').to($horizo??ntalSpan,1,{x:'-10px',y:'-10px'},'step2').to($horizo??ntalSpan,1,{rotation:0,x:'0',y:'0',scaleY:2,scaleX:0.5},'step3').to($horizo??ntalSpan,1,{rotation:90,scaleY:1,scaleX:1},'step4')然后创建竖条的动画，to语句的step名称与横条的step名称相同，这样可以保持动画与横条同步：animation.to($verticalSpan,1,{rotation:45},'step1').to($verticalSpan,1,{x:'10px',y:'10px'},'step2').to($verticalSpan,1,{x:'0',y:'0',scaleX:2,scaleY:0.5},'step3').to($verticalSpan,1,{旋转:90,scaleX:1,scaleY:1},'step4');在动画结束时使用timescale缩放函数，使动画速度翻倍：animation.timeScale(2);最后，把方阵的边长改为10，方阵越大越有气势：constSIDE_LENGTH=10;你完成了！