【前端日常实战】效果预览介绍原文链接感谢comehop??egithub.io浏览源码地址https://github.com/shanyuhai1...代码解读1.首先完成html结构通用样式初始化*{margin:0;填充：0；}正文{边距：0；填充：00.5vw；高度：100vh；背景色：#333；溢出：隐藏；}.container{显示：flex；弹性方向：列；对齐项目：居中；证明内容：居中；}2。天空中的星星在原文中，星星是固定位置的，不会眨眼，这里我们改变这种状态，为了避免重复手动固定星星的位置和大小，我们使用d3库来减少麻烦。首先将.stars改为网格布局，使用span标签作为星星，因为星星会及时闪烁，所以随机--delay参数//索引。jsconstCOLUMNS=15;d3.select('.stars').style('--columns',COLUMNS).selectAll('span').data(d3.range(COLUMNS*COLUMNS)).enter().append('span').style('--delay',()=>Math.random()*20);先给出一个大概的范围，检查下边界。星星{宽度：99vw;高度：70vh；位置：绝对;显示：网格；网格模板列：重复（var（--columns），1fr）；border:1pxsolid;}.starsspan{宽度:0.6vw;高度：0.6vw；颜色：烟灰色；color:currentColor;}星星现在只是正方形，然后给正方形添加旋转和闪烁的动画。星星跨度{变换：比例（0）；动画：自旋20s线性无限；animation-delay:calc(var(--delay)*1s);}@keyframesspin{0%{transform:rotate(0deg)scale(1);}5%,15%{变换：旋转（90度）缩放（0）；背景：一枝黄花；}17.5%{变换：旋转（180度）比例（1）；背景颜色：currentColor；}20%,100%{变换:旋转(90deg)比例(0);}}3。添加火堆的第一件事是修改DOM中火，用mediaquery改手机上的小问题。fires{position:relative;border:1pxsolid;}@mediascreenand(min-width:451px){.fires{width:15vw;身高：15vw；保证金顶部：-7vw；}}@mediascreenand(max-width:450px){.fires{width:18vh;身高：18vh；保证金顶部：-5vw；}}然后完成火焰效果，在parent.fires中添加可用的color和border-radius变量{position:relative;显示：弹性；对齐项目：居中；证明内容：居中；边框：1px实心；--颜色一：#D92B29；--颜色二：#F5732A；--颜色三：#F2B338；--四色：#F5D549；--shape-one：79%21%64%36%/43%61%39%57%；--形状二：23%77%66%34%/57%72%28%43%；--形状三：78%22%63%37%/39%27%73%61%；--shape-four:35%65%78%22%/54%50%50%46%;}@mediascreenand(min-width:451px){.fires__flame{width:6vw;}.fires__flame:nth-of-type(1){高度：15vw；}.fires__flame:nth-of-type(2){高度：12vw；变换：翻译（2.25vw,1.2vw)旋转(30deg);}.fires__flame:nth-of-type(3){高度：13.5vw；变换：平移（-2.25vw，1.2vw）旋转（-30deg）；}.fires__flame:nth-of-type(4){高度：10.5vw；}}@mediascreenand(max-width:450px){.fires__flame{width:7.2vh;}.fires__flame:nth-of-type(1){高度：18vh；}.fires__flame:nth-of-type(2){高度：14.4vh；变换：平移（2.7vh，1.44vh）旋转（30deg）；}.fires__flame:nth-of-type(3){高度：16.2vh；变换：平移（-2.7vh，1.44vh）旋转（-30deg）；}.fires__flame:nth-of-type(4){高度：12.6vh；}}.fires__flame{位置：绝对；背景色：var(--color-one);边界半径：var(--shape-one);z-索引：0；动画名称：火；动画持续时间：1.5s；动画迭代计数：无限；transition:ease0.4s;}.fires__flame:nth-of-type(2){border-radius:var(--shape-two);背景颜色：var(--color-two);不透明度：0.9；z-指数：2；一个imation-delay:0.2s;}.fires__flame:nth-of-type(3){border-radius:var(--shape-three);背景颜色：var（--颜色三）；不透明度：0.8；z-索引：1；animation-delay:0.4s;}.fires__flame:nth-of-type(4){border-radius:var(--shape-four);背景色：var(--color-four);不透明度：0.8；z-索引：1；animation-delay:0.6s;}当然别忘记了火焰的动画效果@keyframesfire{0%{border-radius:var(--shape-one);背景色：var(--color-one);}25%{border-radius:var(--shape-two);背景颜色：var(--color-two);}50%{border-radius:var(--shape-three);背景颜色：var（--颜色三）；}75%{border-radius:var(--shape-four);背景色：var(--color-four);}100%{border-radius:var(--shape-one);背景色：var(--color-one);}}再添加木柴@mediascreenand(min-width:451px){.fires__stick{border-radius:1.5vw;宽度：3vw；身高：13.5vw；底部：-7.5vw；}}@media屏幕和（最大-width:450px){.fires__stick{border-radius:1.8vh;宽度：3.6vh；身高：16.2vh；底部：-9vh；}}.fires__stick{背景颜色：#5a3600;;z-指数：2；变换：旋转（-70度）；}.fires__stick：最后类型{变换：旋转（70度）；背景色：#4e2f01;}4.最后记得确认位置和边框的大小即可删除
