原文地址: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. c语言设计实验报告

    试验项目:1.字符与ASCLL码 2.运算符与表达式的运用 3.顺序结构应用程序 4.数学函数的算法描述 5.鸡兔同笼的算法描述 6.确定坐标的算法描述 姓名:熊承启 实验地点:514实验室 1.字符 ...

  2. Linux压缩和解压缩

    1.tar.gz tar.gz这种格式是Linux下使用得最多的压缩格式.它在压缩时不会占用太多CPU的,而且可以得到一个非常理想的压缩率. tar -zcvf archive_name.tar.gz ...

  3. FragmentXlistview

    package com.example.lenovo.tablayout; /** * Created by lenovo on 2018/7/18. */ import android.os.Asy ...

  4. 软件开发者路线图梗概&书摘chapter1

    软件技能的概念 本书目的:尝试为软件开发的新颖方法整理出一份宣言 原因:定义泛化 从敏捷开发运动中学到的经验:理解支撑规则的底层因素 软件技能的愿景:价值的提取&希望的表达 价值体系: 1.基 ...

  5. admin-4

    每个学员机上有三台预先配置好的虚拟机server —— 作为练习用服务器desktop —— 作为练习用客户机classroom —— 提供网关/DNS/软件素材等资源 通过真机上“虚拟系统管理器”访 ...

  6. JDBC-Oracle连接教程

    前言 本文通过一个在Eclipse平台中搭建的小项目,在项目中使用一条静态命令来查询Oracle数据库测试用户“scott”下emp表中的几个字段,来学习JDBC连接数据库的方法.看完之后读者可以基本 ...

  7. JavaScript第一阶段学习心得

    开始接触JavaScript是从慕课网开始的,基础篇学完.懵了一逼,可能是自己太蠢.感觉跟没学差不多,属性,方法,对象,什么都不懂.有的方法知道起的是什么效果,但是原理什么的都不知道. 还好,基础篇学 ...

  8. [Jave - JDBC] executeUpdate & executeQuery & execute

    1. executeUpdate 用於執行INSERT.UPDATE.DELETE語法,以及 DDL語句(如CREATE TABLE 和DROP TABLE). 返回值為受影響的行數or更新計數(整數 ...

  9. java基础(二):java内部类

    内部类像寄生虫一样生存在其他类[外部类]的内部.定义在类的内部的类叫内部类,它缩小了可见性.根据内部类定义结构的不同,可以把内部类分为 成员内部类和局部内部类.成员内部类定义的地方和外部类的成员变量和 ...

  10. TypeScript 版本相关

    TypeScript 1.3 元组类型 // Declare a tuple type var x: [string, number]; // 初始化 x = []; // ok // 错误的初始化 ...