前端日常实践：48#视频演示如何使用纯CSS制作传统蚊香
时间：2023-04-05 00:51:09
HTML5
效果预览在当前页面点击右侧“点击预览”按钮预览，点击链接预览全文屏幕。https://codepen.io/comehop??e/pen/BVpvMz交互式视频教程本视频是交互式的，您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cZ8Ebf7源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含8个子元素：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:radial-gradient(circleatcenter,midnightblue,black);}绘制香盘的边框线：.coil{position:relative;显示：弹性；证明内容：居中；}.coilspan{位置：绝对；宽度：calc((var(--n)*2-1)*1em);高度：calc((var(--n)-0.5)*1em);border:1emsoliddarkgreen;}.coilspan:nth-child(1){--n:1;}.coilspan:nth-child(2){--n:2;}.??coilspan:nth-child(3){--n:3;}.线圈跨度：nth-child(4){--n:4;}.coilspan:nth-child(5){--n:5;}.coilspan:nth-child(6){--n:6;}.coilspan:nth-child(7){--n:7;}.coilspan:nth-child(8){--n:8;}将框架线的一半放在顶部：.coilspan:nth-child(odd){align-self:flex-end;}删除上边框的下边框和下边框的上边框：.coilspan:nth-child(odd){border-bottom:none;}.coilspan:nth-child(even){border-top:none;}上下边框对齐：.coilspan:nth-child(even){transform:translateX(-1em);}将边框改为曲线:.coilspan:nth-child(odd){border-radius:50%50%00/100%100%00;}.coilspan:nth-child(even){border-radius:0050%50%/00100%100%;}使用伪元素绘制蚊香的中间部分：.coil::before{content:'';位置：绝对；宽度：1em；高度：1em；背景颜色：深绿色；边界半径：50%；左：-1.5em；top:-0.5em;}使用伪元素绘制蚊香燃烧点：.coil::after{content:'';位置：绝对；宽度：1em；高度：1em；边界-半径：50%；顶部：-0.5em；背景颜色：深红色；左：-9.5em；z-指数：-1；变换：比例（0.9）；box-shadow:001emwhite;}最后，给点火点添加闪烁效果：.coil::after{animation:blink1slinearinfinitealternate;}@keyframesblink{to{box-shadow:000white;}}你完成了！
