前端日常实践：89#视频演示如何使用CSS和D3制作旋臂粒子动画

中绘制粒子：.container{display:flex;对齐项目：居中；证明内容：居中；}.containerdiv{位置：绝对；宽度：10vmin；height:10vmin;}.containerdivspan{position:absolute;宽度：继承；身高：继承；边界半径：50%；背景色：石灰绿；transform:translateX(300%);}使用变量定义粒子的旋转角度，其中--particles-per-circle每圈的粒子数，因为每个圈有3个粒子，所以有3个位置圆，每个位置有2个粒子相互重叠。此时，看起来只有3个粒子：.container{--particles-per-circle:3;}.containerdiv{transform:rotate(calc(var(--n)/var(--particles-每圈）*-deg));}.containerdiv:nth-child(1){--n:1;}.containerdiv:nth-child(2){--n:2;}.??containerdiv:nth-child(3){--n:3;}.containerdiv:nth-child(4){--n:4;}.containerdiv:nth-child(5){--n:5;}.containerdiv:nth-child(6){--n:6;}定义粒子从中心向外移动效果：.containerdivspan{animation:move2slinearinfinite;}@keyframesmove{from{transform:translateX(0）规模（0）；}70%{transform:translateX(210%)scale(0.55);}到{转换：translateX(300%)scale(0);}}添加粒子移动时改变颜色的效果，沿色相圈取10种颜色：.containerdivspan{animation:move2slinearinfinite,change-color2slinearinfinite;}@keyframeschange-color{0%,100%{背景色:hsl(calc(0/100*360deg),80%,55%);}10%{背景色:hsl(calc(10/100*360deg),80%,55%);}20%{背景色:hsl(calc(20/100*360度),80%,55%);}30%{背景颜色：hsl(calc(30/100*360deg),80%,55%);}40%{背景颜色：hsl(calc(40/100*360deg),80%,55%);}50%{背景颜色：hsl(calc(50/100*360deg),80%,55%);}60%{背景颜色：hsl(calc(60/100*360deg),80%,55%);}70%{背景颜色：hsl(calc(70/100*360deg),80%,55%);}80%{背景颜色：hsl(calc(80/100*360deg),80%,55%);}90%{背景色：hsl(calc(90/100*360度),80%,55%);}}使用变量设置动画延迟，可以看到6个粒子依次出现。其中--circles代表圈数；--particles表示粒子数，等于每圈粒子数与圈数的乘积：.container{--circles:2;--particles:calc(var(--particles-per-circle)*var(--circles));}.containerdivspan{animation-delay:calc(var(--n)/var(--particles)*-2s);}然后使用d3批量创建粒子。引入d3库：使用d3给--particles-per-circle赋值和--css的圆圈变量：constPARTICLES_PER_CIRCLE=3;constCIRCLES=2;d3.select('.container').style('--particles-per-circle',PARTICLES_PER_CIRCLE).style('--circles',CIRCLES);用d3元素创建粒子dom：constCOUNT_OF_PARTICLES=PARTICLES_PER_CIRCLE*CIRCLES;d3.select('.container').style('--particles-per-circle',PARTICLES_PER_CIRCLE).style('--circles',CIRCLES).selectAll('div').data(d3.range(COUNT_OF_PARTICLES)).enter().append('div').append('span');使用d3给粒子元素的--n变量赋值：d3.select('.container').style('--particles-per-circle',PARTICLES_PER_CIRCLE).style('--circles',CIRCLES).selectAll('div').data(d3.range(COUNT_OF_PARTICLES)).enter().append('div').style('--n',(d)=>d+1).append('span');删除dom中的粒子元素和用css声明的变量。最后调整每圈的粒子数和圈数，形成旋臂效果：constPARTICLES_PER_CIRCLE=14;const圆圈=4;你完成了！