摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/LBPvON
可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cBEvpTL
源代码下载每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读定义 dom,容器中包含 4 个元素,分别代表光晕、火焰和灯芯:
居中显示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: black; }
画出蜡烛的轮廓:
.candle { width: 15em; height: 30em; font-size: 10px; background: linear-gradient( orange, darkorange, sienna, saddlebrown 50%, rgba(0, 0, 0, 0.6) ); box-shadow: inset 2em -3em 5em rgba(0, 0, 0, 0.4), inset -2em 0 5em rgba(0, 0, 0, 0.4); border-radius: 10em / 4em; }
用伪元素画出蜡烛的顶面:
.candle { position: relative; } .candle::before { content: ""; position: absolute; width: inherit; height: 5em; border: 0.2em solid darkorange; border-radius: 50%; box-sizing: border-box; background: radial-gradient( #444, orange, saddlebrown, sienna, darkorange ); filter: opacity(0.7); }
画出蜡烛的灯芯:
.candle { display: flex; justify-content: center; } .thread { position: absolute; width: 0.6em; height: 3.6em; top: -1.8em; background: linear-gradient( #111, black, orange 90% ); border-radius: 40% 40% 0 0; }
画出蜡烛的内焰:
.flames { position: absolute; width: 2.4em; } .flames::before { content: ""; position: absolute; width: inherit; height: 6em; background-color: royalblue; top: -4.8em; border-radius: 50% 50% 35% 35%; border: 0.2em solid dodgerblue; box-sizing: border-box; filter: opacity(0.7); }
画出蜡烛的外焰:
.flames::after { content: ""; position: absolute; width: inherit; height: 12em; top: -12em; background: linear-gradient(white 80%, transparent); border-radius: 50% 50% 20% 20%; box-shadow: 0 -0.6em 0.4em darkorange; }
画出光晕:
.glow { position: absolute; width: 10em; height: 18em; background-color: orangered; border-radius: 50%; top: -16.5em; filter: blur(6em); }
为外焰增加摇曳的效果:
.outer-flame { animation: enlarge 5s linear infinite, move 6s linear infinite; } @keyframes move { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } } @keyframes enlarge { 0%, 100% { height: 12em; top: -12em; } 50% { height: 14em; top: -13em; } }
为光晕增加闪烁效果:
.glow { animation: blink 100ms infinite; } @keyframes blink { to { filter: blur(6em) opacity(0.8); } }
最后,使蜡烛垂直居中:
.candle { top: 10em; }
大功告成!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/52615.html
摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 showImg(https://segmentfault.com/img/bVbdxru?w=500&h=500); 效果预览 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehop...
摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书视频演示如何用纯创作一台咖啡机视频演示如何用 过往项目 2018 年 6 月份项目汇总(共 27 个项目) 2018 年 5 月份项目汇总(共 30 个项目) 2018 年 4 月份项目汇总(...
摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书视频演示如何用纯创作一台咖啡机视频演示如何用 过往项目 2018 年 6 月份项目汇总(共 27 个项目) 2018 年 5 月份项目汇总(共 30 个项目) 2018 年 4 月份项目汇总(...
阅读 3359·2021-11-24 09:38
阅读 1364·2021-11-22 15:08
阅读 1415·2021-09-29 09:35
阅读 444·2021-09-02 15:11
阅读 1267·2019-08-30 12:55
阅读 352·2019-08-29 17:16
阅读 466·2019-08-29 11:30
阅读 377·2019-08-26 13:23