前端日常实战：108#视频演示如何使用CSS和D3制作抽象的黑白重叠动画
时间：2023-03-31 00:01:48
CSS
效果预览按右边“点击预览”按钮在当前页面预览，点击链接全屏预览。https://codepen.io/comehop??e/pen/Yjomyd互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cydZrfr源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含3个子元素，每个子元素代表一个圆：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:black;}定义容器尺寸：.circles{width:60vmin;高度：60vmin；}在容器中画一个圆：.circles{position:relative;}.circlesspan{position:absolute;框大小：边框框；宽度：50%；高度：50%；背景色：白色；边界半径：50%；left:25%;}定义变量，绘制多个圆，每个圆围绕第一个圆的底部中点旋转，形成一个更大的圆：.circles{--particles:3;}.circlesspan{transform-origin:bottom中心;--deg:calc(360deg/var(--particles)*(var(--n)-1));变换：旋转（var（--deg））;}.circlesspan：nth-??child（1）{--n：1;}.circlesspan：nth-child(2){--n:2;}.??circlesspan:nth-child(3){--n:3;}给子元素添加动画效果：.circlesspan{animation:rotating5sease-in-出无限；}@keyframes旋转{0%{变换：旋转（0）；}50%{变换：旋转（var（--deg））translateY（0）；}100%{transform:rotate(var(--deg))translateY(100%)scale(2);}}设置子元素混色模式，使子元素之间重叠部分显示为黑色：.circlesspan{mix-blend-mode:difference;}给容器添加动画效果，偏移子元素放大，这样动画就可以平滑衔接了：.circles{animation:zoom5slinearinfinite;}@keyframeszoom{to{transform:scale(0.5)translateY(-50%);}}接下来使用d3批量处理dom元素和css变量引入d3库：使用d3给代表圈数的变量赋值：constCOUNT_OF_PARTICLES=30;d3.select('.circles').style('--particles',COUNT_OF_PARTICLES)使用d3生成dom元素：d3.select('.circles').style('--particles',COUNT_OF_PARTICLES)。selectAll('span').data(d3.range(COUNT_OF_PARTICLES)).enter().append('span');使用d3给代表子元素下标的变量赋值：d3.select('.circles').style('--particles',COUNT_OF_PARTICLES).selectAll('span').data(d3.range(COUNT_OF_PARTICLES)).enter().append('span').style('--n',(d)=>d+1);删除html文件中的相关dom元素和css文件中的相关css变量。最后，调整圈数为30：constCOUNT_OF_PARTICLES=30;大功告成！
