前端日常实践：90#视频演示如何用CSS和D3制作无尽的六边形空间

居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:radial-gradient(circleatcenter,gold,black);}定义圆外容器的大小：.container{width:20em;高度：20em；字体大小：20px；border-radius:50%;}在六边形容器中绘制一个矩形：.hexagons{width:inherit;身高：继承；显示：弹性；对齐项目：居中；证明内容：中心；}.hexagonsspan{位置：绝对；宽度：计算（20em/1.732）；身高：继承；背景色：currentColor;}使用伪元素再创建2个相同大小的矩形以形成一个六边形：.hexagonsspan:before,.hexagonsspan:after{content:'';位置：绝对；宽度：继承；高度：继承；background-color:currentColor;}.hexagonsspan:before{transform:rotate(60deg);}.hexagonsspan:after{transform:rotate(-60deg);}让六边形的颜色交替：.hexagonsspan:nth-child(odd){color:gold;}.hexagonsspan:nth-child(even){color:#222;}设置变量，使六边形逐渐缩小，小六边形与大六边形重叠上图：.hexagonsspan{变换：比例（var（--scale））;}.hexagonsspan：nth-??child（1）{--scale：1;}.hexagonsspan：nth-??child（2）{--scale：calc（1*0.9);}.hexagonsspan:nth-child(3){--scale:calc(1*0.9*0.9);}.hexagonsspan:nth-child(4){--scale:calc(1*0.9*0.9*0.9);}.hexagonsspan:nth-child(5){--scale:calc(1*0.9*0.9*0.9*0.9);}然后设置变量，让六边形依次倾斜不同的角度：.hexagonsspan{transform:scale(var(--scale))rotate(calc(var(--n)*6deg));}.hexagonsspan:nth-child(1){--n:1;}。六边形温泉n:nth-child(2){--n:2;}.??hexagonsspan:nth-child(3){--n:3;}.hexagonsspan:nth-child(4){--n:4;}.hexagonsspan:nth-child(5){--n:5;}定义动画效果：.hexagons{animation:twist0.5slinearinfinite;}@keyframestwist{from{transform:rotate(0deg)scale（1）；}到{变换：旋转（计算（6deg*-2））比例（1.25）；}}隐藏容器外的内容：.container{overflow:hidden;}接下来使用d3批量创建六边形d3库：使用d3创建六边形dom元素：constCOUNT=5;d3.select('.hexagons').selectAll('span').data(d3.range(COUNT)).enter().append（'跨度'）;使用d3给六边形的--n和--scale变量赋值：d3.select('.hexagons').selectAll('span').data(d3.range(COUNT)).enter().append('span').style('--scale',(d)=>Math.pow(0.9,d)).style('--n',(d)=>d+1);删除html文件中的六边形dom元素和css文件中声明的变量。最后，将六边形的数量改为100：constCOUNT=100;大功告成！