前端日常实践：88#视频演示如何使用CSS和D3制作火焰动画
时间：2023-04-05 22:49:17
HTML5
效果预览点击右侧“点击预览”按钮可在当前页面预览，点击链接可全屏预览.https://codepen.io/comehop??e/pen/xJdVxx互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cP6LRSk源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含3个元素，每个元素代表组成火焰的火焰：/span>
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:linear-gradient(black,maroon);}定义容器尺寸：.flame{width:10em;高度：12em；font-size:24px;}绘制火焰：.flame{position:relative;}.flamespan{position:absolute;宽度：5em；高度：5em；背景：径向渐变（橙红色20%，rgba(255,69,0,0)70%）；边界半径：50%；bottom:0;}使用变量绘制多个火焰，其中--particles为火焰数量：.flame{--particles:3;}.flamespan{left:calc((var(--n)-1)*5em/var(--particles));}.flamespan:nth-child(1){--n:1;}.flamespan:nth-child(2){--n:2;}.??flame跨度：第n个孩子d(3){--n:3;}修改混合模式，使火焰重叠部分变亮：.flamespan{mix-blend-mode:screen;}增加火焰升起的动画效果：.flamespan{动画：上升1s缓入无限；}@keyframes上升{来自{transform:translateY(0)scale(1);过滤器：不透明度（0）；}25%{过滤器：不透明度（1）；}到{转换：translateY(-10em)scale(0);过滤器：不透明度（0）；}}使用变量设置火焰上升的延迟时间，让火焰一个接一个上升：.flamespan{animation-delay:calc(var(--rnd)*1s);}.flamespan:nth-child(1){--n:1;--rnd:0.1234;}.flamespan:nth-child(2){--n:2;--rnd:0.3456;}.flamespan:nth-child(3){--n:3;--rnd:0.6789;}接下来使用d3批量处理dom引用d3库：使用d3给css中的--particles变量赋值：constCOUNT_OF_PARTICLES=3;d3.select('.flame').style('--particles',COUNT_OF_PARTICLES);使用d3在dom中创建火焰元素：d3.select('.flame').style('--particles',COUNT_OF_PARTICLES).selectAll('span').data(d3.range(COUNT_OF_PARTICLES)).enter().append('跨度');使用d3为flame元素的css中的--n和--rnd变量赋值：d3.select('.flame').style('--particles',COUNT_OF_PARTICLES).selectAll('span').data(d3.range(COUNT_OF_PARTICLES)).enter().append('span').style('--n',(d)=>d+1).style('--rnd',()=>Math.random());删除dom中的flame元素，删除css中的变量声明。最后设置火焰元素为100，形成火焰效果：constCOUNT_OF_PARTICLES=100;你完成了！
