前端日常实践：95#视频演示如何用纯CSS和D3制作一个扭曲的蠕虫
时间：2023-04-05 13:24:15
HTML5
效果预览在当前页面点击右侧“点击预览”按钮预览，点击链接预览在全屏。https://codepen.io/comehop??e/pen/QBQJMg互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/c9mydU8源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含3个元素，分别代表蠕虫的3个body部分：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:#222;}绘制蠕虫最大的身体部分：.worm{display:flex;align-items:center;证明内容：中心；}.wormspan{位置：绝对；宽度：90vmin；高度：90vmin；背景色：hsl(336,100%,19%)；边界半径：50%；边框：3px实心；border-color:hsl(336,100%,36%);}定义css变量：.worm{--particles:3;}.wormspan:nth-child(1){--n:1;}.wormspan:nth-child(2){--n:2;}.??wormspan:nth-child(3){--n:3;}使用变量定义bodysegments的大小，绘制出其他bodysegments:.wormspan{--diameter:calc(100vmin-var(--n)*90vmin/var(--particles));无线dth:var(--直径);height:var(--diameter);}使用变量来定义身体部分的颜色，使它们看起来有层次感：.wormspan{background-color:hsl(336,100%,calc((19+var(--n)*3)*1%);边框颜色：hsl(336,100%,calc((36+var(--n)*1)*1%));box-shadow:0033pxrgba(0,0,0,0.3);}定义动画效果：.wormspan{animation:rotating4sinfinitecubic-bezier(0.6,-0.5,0.3,1.5);}@keyframes旋转{来自{变换原点：0%；}到{变换：旋转（1转）；变换原点：0%50%；}}用变量设置动画延迟：.wormspan{animation-delay:calc(1s-var(--n)*100ms);}隐藏页面外的内容：body{overflow:hidden;}接下来用d3来批量处理dom元素引入d3库：使用d3给--particles变量赋值：constCOUNT_OF_PARTICLES=3;d3.select('.worm').style('--particles',COUNT_OF_PARTICLES);使用d3创建dom元素：d3.select('.worm').style('--particles',COUNT_OF_PARTICLES).selectAll('span').data(d3.range(COUNT_OF_PARTICLES)).enter().append('跨度'）;使用d3为dom元素的--n属性赋值：d3.select('.worm').style('--particles',COUNT_OF_PARTICLES).selectAll('span').data(d3.range(COUNT_OF_PARTICLES)).enter().append('span').style('--n',(d)=>d+1);delete删除html文件中声明dom元素的代码，删除css文件中声明--particles和--n变量的代码。最后设置dom元素个数为12：constCOUNT_OF_PARTICLES=12;大功告成！
