前端日常实践：75#视频演示如何用纯CSS效果制作闪烁的蜡烛
时间：2023-04-05 18:22:44
HTML5
预览点击右侧“点击预览”按钮可在当前页面预览，点击链接可全屏预览。https://codepen.io/comehop??e/pen/LBPvON互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cBEvpTL源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含4个分别代表halo、flame和wick的元素：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:black;}绘制蜡烛的轮廓：.candle{width:15em;高度：30em；字体大小：10px；背景：线性渐变（橙色、深橙色、西耶娜、马鞍棕色50%，rgba(0,0,0,0.6)）；框阴影：插入2em-3em5emrgba(0,0,0,0.4)，插入-2em05emrgba(0,0,0,0.4)；边界半径：10em/4em；}使用伪元素在蜡烛顶部绘制：.candle{position:relative;}.candle::before{content:'';位置：绝对；宽度：继承；高度：5em；边框：0.2em纯深橙色；边界半径：50%；框大小：边框框；背景：径向渐变（#444，橙色，马鞍棕色，西耶娜，深橙色）；filter:opacity(0.7);}画蜡烛的灯芯：.candle{display:flex;证明内容：中心；}.thread{位置：绝对；宽度：0.6em；高度：3.6em；顶部：-1.8em；背景：线性渐变（#111，黑色，橙色90%）；border-radius:40%40%00;}画出蜡烛的内焰：.flames{position:absolute;宽度：2.4em;}.flames::before{内容：'';位置：绝对；宽度：继承；高度：6em；背景色：宝蓝色；顶部：-4.8em；边界半径：50%50%35%35%；边框：0.2em纯道奇蓝；框大小：边框框；filter:opacity(0.7);}画出蜡烛的火焰：.flames::after{content:'';位置：绝对；宽度：继承；高度：12em；顶部：-12em；背景：线性渐变（白色80%，透明新台币);边界半径：50%50%20%20%；box-shadow:0-0.6em0.4emdarkorange;}drawhalo:.glow{position:absolute;宽度：10em；高度：18em；背景颜色：橙色；边界半径：50%；顶部：-16.5em；filter:blur(6em);}给外层火焰添加摇摆效果:.outer-flame{animation:enlarge5slinearinfinite,move6slinearinfinite;}@keyframesmove{0%,100%{transform:rotate(-2度);}50%{变换：旋转（2deg）；}}@keyframes放大{0%,100%{高度:12em;顶部：-12em；}50%{高度：14em；顶部：-13em；}}为发光添加闪烁效果：.glow{animation:blink100msinfinite;}@keyframesblink{to{filter:blur(6em)opacity(0.8);}}最后，将蜡烛垂直居中：.candle{top:10em;}就大功告成了！
