前端日常实践：101#视频演示如何使用CSS和D3制作一组摆线
时间：2023-03-30 15:10:28
CSS
效果预览在当前页面点击右边的“点击预览”按钮进行预览，点击链接进行预览全屏。https://codepen.io/comehop??e/pen/vavZPx互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/c3q6LH7源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含3个元素，代表3个摆线：
居中显示:body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:linear-gradient(lightyellow,burlywood);}定义容器大小，画固定摆线Schematicwall:.pendulums{width:40em;高度：30em；字体大小：10px；border-top:0.3emsolidcadetblue;}画一个摆线：.pendulums{position:relative;}.pendulumsspan{position:absolute;宽度：0.2em；高度：15em；背景色：cadetblue；left:50%;}使用一个伪元素绘制悬挂在摆线底部的球：??.pendulumsspan::before{content:'';位置：绝对；宽度：1.5em；高度：1.5em；背景：钢蓝；边界半径：50%；顶部：100%；left:-0.75em;}用径向渐变给球添加光影：.pendulumsspan::before{background:radial-gradient(circleat70%35%,white,darkturquoise30%,steelblue50%);}使用伪元素绘制球的阴影：.pendulumsspan::after{content:'';位置：绝对；宽度：2em；高度：0.3em；背景色：rgba(0,0,0,0.2);顶部：120%；左：-1em；过滤器：模糊（0.4em）；摆线的顶点为原点，摆线向左旋转：.pendulumsspan{transform-origin:50%top;transform:rotate(25deg);}让摆线摆动：.pendulumsspan{animation:swingease-in-outinfinite;animation-duration:1.5s;}@keyframesswing{50%{transform:rotate(-25deg);}}为每个摆线定义下标变量：.pendulumsspan:nth-child(1){--n:1;}.pendulumsspan:nth-child(2){--n:2;}.??pendulumsspan:nth-child(3){--n:3;}用变量设置摆线的长度，动画时长都是递增等差数列：.pendulumsspan{height:calc((var(--n)-1)*1em+15em);animation-duration:calc((var(--n)-1)*0.02s+1.5s);}接下来使用d3批量处理dom元素和css变量：导入d3库：使用d3创建摆线dom元素：constCOUNT=3;d3.select('.pendulums').selectAll('span').data(d3.range(COUNT)).enter().append('span')用d3定义摆线的下标变量：d3.select('.pendulums').selectAll('span').data(d3.range(COUNT)).enter().append('span').style('--n',(d)=>d+1);删除html文件中的相关dom定义和css文件中的变量定义最后,调整摆线数为15.constCOUNT=15;大功告成！
