75.纯 CSS 创作一支摇曳着烛光的蜡烛
原文地址: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 创作一支摇曳着烛光的蜡烛的更多相关文章
- 49.纯 CSS 创作一支诱人的冰棍
原文地址:https://segmentfault.com/a/1190000015257561 感想:重点在让色彩滚动起来->background-position: 0 1000vh; HT ...
- 如何用纯 CSS 创作一支诱人的冰棍
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vrxzMw 可交互视频教 ...
- 前端每日实战:49# 视频演示如何用纯 CSS 创作一支诱人的冰棍
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vrxzMw 可交互视频教程 此视频 ...
- 3.纯 CSS 创作一个容器厚条纹边框特效
原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...
- 2.纯 CSS 创作一个矩形旋转 loader 特效
原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR 扩展地址:https://codepen.io/pen/ HT ...
- 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕(残缺)
原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...
- 如何创作用纯 CSS 绘制一支栩栩如生的铅笔
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/PaZYBw 可交互视频教 ...
- 74.纯 CSS 创作一台 MacBook Pro
原文地址:https://segmentfault.com/a/1190000015568609 HTML code: <div class="macbook"> &l ...
- 63(原67).纯 CSS 创作单元素点阵 loader
原文地址:https://segmentfault.com/a/1190000015444368 感想:CSS又一次让我见识到它的强大之处 --> box-shadow . box-shadow ...
随机推荐
- hello.java分析
如下图源码所示: 该段代码声明了一个entity实体类,该类有一个变量name,对该变量写了对应的get和set方法.类中还有一个空的构造方法hello(). @RequestScoped用于指定一个 ...
- wpf 圆角TextBox 样式
<Style x:Key="RoundCornerTextStyle" TargetType="{x:Type TextBox}"> <Set ...
- What You Can Learn from Actifio Logs
The Actifio services generate many logs, some of which are useful for troubleshooting. This section ...
- 如何查看电脑已连接的WiFi密码
控制面板->网络和Internet->网络和共享中心 点击已连接的WLAN网络,查看“WLAN状态”->无线属性->安全 在显示字符下可以看到已连接wifi的密码
- python 执行oracle、python脚本文件
import os # sql脚本结尾加';'!!! os.system('sqlplus.exe scott/s123@127.0.0.1:1521/ORCL @D:/PycharmProjects ...
- Flink
1. Flink表接受是基于dataset.datastream的:首先需要注册一个dataset,然后通过sql去查询这个dataset,返回的即使基于dataset查询结果,这个查询结构就是Fli ...
- python之format函数
自python2.6开始,新增了一种格式化字符串的函数str.format(),可谓威力十足.那么,他跟之前的%型格式化字符串相比,有什么优越的存在呢?让我们来揭开它羞答答的面纱. 语法 它通过{}和 ...
- RAM和Flash区别
都是随机存储器,断电数据消失,但Flash有点不一样,它在消失数据之前,添加了一个""性质",这个性质能上电后再识别,且把这个信号返回到ram中,这样近似的把flash当 ...
- docker18.09.5 Dockerfile文件编写
Dockerfile命令详解(超全版本) https://www.cnblogs.com/dazhoushuoceshi/p/7066041.html 案例1 dockerfile文件内容: FRO ...
- PAT 乙级 1044 火星数字 (20 分)
1044 火星数字 (20 分) 火星人是以 13 进制计数的: 地球人的 0 被火星人称为 tret. 地球人数字 1 到 12 的火星文分别为:jan, feb, mar, apr, may, j ...