前端日常实践：139#视频演示如何使用CSS和D3制作斑点粒子交织的动画
时间：2023-04-05 23:57:27
HTML5
效果预览在当前页面点击右侧“点击预览”按钮进行预览，点击链接全屏预览。https://codepen.io/comehop??e/pen/zJybdq互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cGV7phy源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含3个子元素：
设置页面背景：正文{保证金：0;宽度：100vw；高度：100vh；background:radial-gradient(circleatcenter,#222,black20%);}定义容器尺寸：.container{width:100%;height:100%;}设置spotStyle，它定义了2个颜色变量，亮色和暗色：.container{position:relative;}.containerspan{--bright-color:#d4ff00;--深色：#e1ff4d；位置：绝对；宽度：30px；高度：30px；左边距：-15px；边距顶部：-15px；背景：径向渐变（var（--bright-color），var（--dark-color））;:50%;box-shadow:0025px3pxvar(--dark-color);}将光点定位到页面中心：.containerspan{transform:translateX(50vw)translateY(50vh);}增加光点从中心向四周展开和收缩的动画效果：.containerspan{animation：动画1.5s无限交替；animation-delay:calc(var(--n)*0.015s);}@keyframesanimate{80%{filter:opacity(1);}100%{transform:translateX(calc(var(--x)*1vw))translateY(calc(var(--y)*1vh));过滤器：不透明度（0）；}}定义动画中使用的变量--x,--y和-n:.containerspan:nth-child(1){--x:20;--y:30;--n:1;}.containerspan:nth-child(2){--x:60;--y:80;--n:2;}.??containerspan:nth-child(3){--x:10;--y:90;--n:3;}设置容器的景深，使光斑运动有由远及近的感觉：.container{perspective:500px;}.containerspan{transform:translateX(50vw)translateY(50vh)translateZ(-1000px);}至此，少量元素的动画效果就完成了，接下来用d3批量创建dom元素和css变量引入d3库，删除html文件中的子元素和css文件中的子元素变量：定义点粒子数量：constCOUNT=3;批量创建dom元素：d3.select('.container').selectAll('span').data(d3.range(COUNT)).enter().append('span');为dom元素设置--x、--y、--n值，其中--x和--y为1到99之间的随机数：d3.select('.container')/*略*/.style('--x',()=>d3.randomUniform(1,99)()).style('--y',()=>d3.randomUniform(1,99)()).style('--n',d=>d);然后为dom元素设置--bright-color和--dark-color值：d3.select('.container')/*slightly*/.style('--dark-color',(d)=>d3.color(`hsl(${70+d*0.1},100%,50%)`)).style('--bright-color',(d)=>d3.color(`hsl(${70+d*0.1},100%,50%)`).brighter(0.15));最后，将斑点粒子数设置为200：constCOUNT=200；你完成了！
