原文地址:https://segmentfault.com/a/1190000015580809

学习后效果地址:https://scrimba.com/c/c8PQ3PTB

感想:CSS 真强大!

HTML code:

<!-- candle: 蜡烛; glow: 光晕; flames:火焰; thread:灯芯 -->
<div class="candle">
<span class="glow"></span>
<span class="flames"></span>
<span class="thread"></span>
</div>

CSS code:

html, body {
margin:;
padding:;
}
/* 设置body的子元素水平垂直居中 */
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
/* 画出蜡烛的轮廓 */
.candle{
position: relative;
top: 10em;
display: flex;
justify-content: center;
/* 现在浏览器默认12px */
font-size: 12px;
width: 15em;
height: 30em;
/* 显示border看清candle的大小
border: 1px solid white; */
border-radius: 10em / 4em;
box-shadow:
inset 2em -3em 5em rgba(0, 0, 0, 0.4),
inset -2em 0 5em rgba(0, 0, 0, 0.4);
background: linear-gradient(
orange,
darkorange,
sienna,
saddlebrown 50%,
rgba(0, 0, 0, 0.6)
);
}
/* 用伪元素画出蜡烛的顶面 */
.candle::before{
position: absolute;
/* 设置为此元素设置的width、height包括此元素的border、padding、content */
box-sizing: border-box;
content: '';
width: 100%;
height: 5em;
border: 0.2em solid darkorange;
border-radius: 50%;
background: radial-gradient(
#444,
orange,
saddlebrown,
sienna,
darkorange
);
filter: opacity(0.7);
}
/* 画出灯芯 */
.thread{
position: absolute;
top: -1.8em;
width: 0.6em;
height: 3.6em;
/* border: 1px solid white; */
border-radius: 40% 40% 0 0;
background: linear-gradient(
#111,
black,
orange 90%
);
}
/* 画出蜡烛轮廓 */
.flames{
position: absolute;
width: 2.4em;
/* border: 1px solid white;*/
}
/* 利用flames的::before伪元素画出內焰 */
.flames::before{
position: absolute;
top: -4.8em;
content:'';
box-sizing: border-box;
width: 100%;
height: 6em;
border: 0.2em solid transparent;
border-radius: 50% 50% 35% 35%;
filter: opacity(0.7);
}
/* 利用flames的::after伪元素画出外焰 */
.flames::after{
position: absolute;
top: -12em;
content:'';
width: 100%;
height: 12em;
border-radius: 50% 50% 20% 20%;
box-shadow: 0 -0.6em 0.4em darkorange;
background: linear-gradient(white 80%, transparent);
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{
position: absolute;
top: -16.5em;
width: 10em;
height: 18em;
border-radius: 50%;
background-color: orangered;
filter: blur(6em);
animation: blink 100ms infinite;
}
/* 为光晕增加闪烁效果 */
@keyframes blink{
to{
filter: blur(6em) opacity(0.8);
}
}

75.纯 CSS 创作一支摇曳着烛光的蜡烛的更多相关文章

  1. 49.纯 CSS 创作一支诱人的冰棍

    原文地址:https://segmentfault.com/a/1190000015257561 感想:重点在让色彩滚动起来->background-position: 0 1000vh; HT ...

  2. 如何用纯 CSS 创作一支诱人的冰棍

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vrxzMw 可交互视频教 ...

  3. 前端每日实战:49# 视频演示如何用纯 CSS 创作一支诱人的冰棍

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vrxzMw 可交互视频教程 此视频 ...

  4. 3.纯 CSS 创作一个容器厚条纹边框特效

    原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...

  5. 2.纯 CSS 创作一个矩形旋转 loader 特效

    原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HT ...

  6. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕(残缺)

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  7. 如何创作用纯 CSS 绘制一支栩栩如生的铅笔

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/PaZYBw 可交互视频教 ...

  8. 74.纯 CSS 创作一台 MacBook Pro

    原文地址:https://segmentfault.com/a/1190000015568609 HTML code: <div class="macbook"> &l ...

  9. 63(原67).纯 CSS 创作单元素点阵 loader

    原文地址:https://segmentfault.com/a/1190000015444368 感想:CSS又一次让我见识到它的强大之处 --> box-shadow . box-shadow ...

随机推荐

  1. JavaSE学习(二):进制转换—数据类型转换—Java运算符

    一.进制转换 1.1 其他进制转十进制(以十六进制为例): 十六进制范围:0-9, A-F对应数字10-15 2A7E(16)  =  14*16(0) +7*16(1) + 10*16(2)  + ...

  2. 【[AHOI2005]洗牌 题解

    一道好题. 首先是数据范围. 0<N≤10^10 ,0 ≤M≤10^10,且N为偶数 这是这道题的坑点,也是痛点. 10^10表示这这道题必有规律. 那么,first step,我们先探索规律. ...

  3. [C++]_ELVE_Windows下QT5.12连接MySql8.0解决方案

    #0x01 准备 1)要保证QT和MySQL都是一样的位数,我的就是都安装的64位. 2)安装Qt5.12,这里主要提一点,在安装时候,有个选择插件那块,尽量都选上,里面有个database选项,记得 ...

  4. springmvc的dispatchservlet初始化

    初始化做的事情,处理下controller的映射关系 https://blog.csdn.net/qq_38410730/article/details/79426673

  5. mvc项目远程发布到windows server服务器

    1.安装IIS的时候需要将这两个选项勾选起来 2.确保 管理服务委派 这个选项存在 3.添加委派规则 4.配置IIS管理用户,后续需要用这个用户进行发布连接 5.配置站点的IIS权限 选择刚才在前面设 ...

  6. centos7远程安装oracle11g R2详细教程-解决一切问题

    相关链接与资源: sqldevelper(各种操作系统的oracle客户端) http://www.oracle.com/technetwork/cn/developer-tools/sql-deve ...

  7. Webpack 模块处理

    webpack模块处理 1. ES6 静态Import ES6的import会被转化为commonjs格式或者是AMD格式,babel默认会把ES6的模块转化为commonjs规范的. import ...

  8. jenkins疑惑

    本地仓库,脚本 os.getcwd() 获取当前脚本目录 正常 把脚本放到了工作区,os.getcwd()获取的却是 项目的主目录 打算: 思路: 兼容一波,给jenkins的写个配置文件在 项目的主 ...

  9. 分布式job-任务调度(一)

    什么是任务调度: 任务调度:在单位时间内,去调用某个方法或者执行某段代码 java实现方式: 方法一(使用线程实现): public static void ThreadTskScheduling() ...

  10. 2016310Exp5 MSF基础应用

    1. 实践目标 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 1.1一个主动攻击实践,如ms08_067; (1分) 1.2 一个针对浏览器的攻击, ...