纯CSS3实现蜡烛（冒烟）效果
1. 闲来无事时在网上看一些前辈的博客文章，自己尝试了一下。学习到最重要的一点就是box-shadow的叠加使用，受益非线。先上一下效果图：
其中有以下重要的几点：
1. 蜡烛底座的border-radius的水平圆角与垂直圆角设置，即 border-radius：左上水平 右上水平 右下水平 左下水平 / 左上垂直 右上垂直 右下垂直 左下垂直；即border-radius其实是可以设置八个值的。
2. box-shadow的多层叠加（详细可见代码）。
3. 径向渐变的方式(circle、ellipse),详细可见代码。
4. box-shadow的内嵌
5. 烟的径向渐变虚化效果
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.candle-box{
border: 1px solid #ddd;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.box{
width: 300px;
}
.box .title{
color: #ccc;
text-align: center;
}
.candle-main{
position: relative;
width: 40px;
height: 120px;
background: #f00;
border-radius: 0 0 60px 60px / 0 0 25px 25px;
margin-top: 50px;
}
.candle-tip{
position: relative;
top: -17px;
}
.candle-top{
position: absolute;
top: 5px;
left: 0;
width: 40px;
height: 20px;
z-index: 10;
background: #EF4D65;
box-shadow:0 0 10px #f00 inset;
border-radius: 60px / 25px;
}
.candle-top:after{
content: "";
position: absolute;
top: -8px;
left: calc( 50% - 2px);
width: 4px;
height: 20px;
border-radius: 2px 2px 0 0;
background: linear-gradient(to bottom ,#000 0%,#fff 100%);
}
.candle-fame{
width: 10px;
height: 20px;
border-radius: 20px / 40px;
background: radial-gradient(circle,transparent 20%,#fff 75%);
box-shadow: 0 -3px 8px 2px #fff, 0 -8px 15px 5px #ff0, 0 -8px 0 8px #f00;
position: relative;
z-index: 50;
top: -5px;
-webkit-animation: flicker 3s linear infinite;
-o-animation: flicker 3s linear infinite;
animation: flicker 3s linear infinite;
}
.candle-fame-box{
height: 20px;
display: flex;
justify-content: center;
} .smoke{
position: relative;
width: 20px;
height: 20px;
z-index: 50;
top: -7px;
display: none;
}
.smoke span{
display: block;
width: 20px;
height:20px;
opacity: 0;
border-radius: 50%;
position: absolute;
top:0;
left: 0;
background: radial-gradient(#333, transparent);
}
.l-smoke1{animation:smokeL linear 10s 1s infinite;}
.l-smoke2{animation:smokeL linear 10s 2s infinite;}
.l-smoke3{animation:smokeL linear 10s 3s infinite;}
.l-smoke4{animation:smokeL linear 10s 4s infinite;}
.l-smoke5{animation:smokeL linear 10s 5s infinite;}
.l-smoke6{animation:smokeL linear 10s 6s infinite;}
.l-smoke7{animation:smokeL linear 10s 7s infinite;}
.l-smoke8{animation:smokeL linear 10s 8s infinite;}
.l-smoke9{animation:smokeL linear 10s 9s infinite;}
.l-smoke10{animation:smokeL linear 10s 10s infinite;}
.r-smoke1{animation:smokeR linear 10s 1.5s infinite;}
.r-smoke2{animation:smokeR linear 10s 2.5s infinite;}
.r-smoke3{animation:smokeR linear 10s 3.5s infinite;}
.r-smoke4{animation:smokeR linear 10s 4.5s infinite;}
.r-smoke5{animation:smokeR linear 10s 5.5s infinite;}
.r-smoke6{animation:smokeR linear 10s 6.5s infinite;}
.r-smoke7{animation:smokeR linear 10s 7.5s infinite;}
.r-smoke8{animation:smokeR linear 10s 8.5s infinite;}
.r-smoke9{animation:smokeR linear 10s 9.5s infinite;}
.r-smoke10{animation:smokeR linear 10s 10.5s infinite;}
@keyframes flicker{
0% {
transform:scale(1);
}
20% {
transform:scale(1.1,0.9) rotate(3deg);
}
50% {
transform:scale(1,1.2);
}
80% {
transform:scale(0.9,1.1) rotate(-3deg);
}
100% {
transform:scale(1);
}
}
@keyframes smokeL {
0%{
transform:scale(0.2);
}
5%{
transform:scale(0.2) translate(-5px, 0);
opacity: 1;
}
100%{
transform:scale(1) translate(-5px, -100px);
opacity:0;
}
}
@keyframes smokeR {
0%{
transform:scale(0.2);
}
5%{
transform:scale(0.2) translate(2px, 0);
opacity: 1;
}
100%{
transform:scale(1) translate(2px, -100px);
opacity:0;
}
}
</style>
</head>
<body>
<div class="box">
<h2 class="title">点击蜡烛点亮或熄灭</h2>
<div class="candle-box">
<div class="candle-main" id="candle">
<div class="candle-tip">
<div class="candle-top"></div>
<div class="candle-fame-box">
<div class="candle-fame" id="fame"></div>
<div class="smoke" id="smoke">
<span class="l-smoke1"></span>
<span class="r-smoke1"></span>
<span class="l-smoke2"></span>
<span class="r-smoke2"></span>
<span class="l-smoke3"></span>
<span class="r-smoke3"></span>
<span class="l-smoke4"></span>
<span class="r-smoke4"></span>
<span class="l-smoke5"></span>
<span class="r-smoke5"></span>
<span class="l-smoke6"></span>
<span class="r-smoke6"></span>
<span class="l-smoke7"></span>
<span class="r-smoke7"></span>
<span class="l-smoke8"></span>
<span class="r-smoke8"></span>
<span class="l-smoke9"></span>
<span class="r-smoke9"></span>
<span class="l-smoke10"></span>
<span class="r-smoke10"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var candle = document.querySelector("#candle");
var fame = document.querySelector("#fame");
var smoke = document.querySelector("#smoke")
var flag = 1;
candle.addEventListener("click",function(){
if(flag){
fame.style.display = "none";
smoke.style.display = "block";
flag = 0;
}else{
fame.style.display = "block";
smoke.style.display = "none";
flag = 1;
}
})
</script>
</body>
</html>
纯CSS3实现蜡烛（冒烟）效果的更多相关文章
- 纯css3艺术文字样式效果代码
效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text ...
- 简单几步用纯CSS3实现3D翻转效果
作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform ...
- 滑动开关效果 css3滑动开关】纯CSS3代码实现滑动开关效果-css3滑动效果-css3左右滑动
今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动效果. 今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动 ...
- 纯CSS3制作的“Ribbons”效果
在看具体每个demo之前,我们一起来看下面一个截图: 上图是一个典型的“Ribbons”各部位的示意图,但每一个“Ribbons”并不会都使用上图示意的各个部分,在下面的实例中大家可以明显的看 到或者 ...
- 纯css3代码写九宫格效果
主要用到css3中的transition和布局知识.代码如下 <!DOCTYPE html> <html lang="en"> <head> & ...
- 【CSS3】纯CSS3制作页面切换效果
此前写的那个太复杂了,来点简单的核心 <html> <head> <title></title> <style type="text/c ...
- 8个超炫酷的纯CSS3动画及源码分享
在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...
- 纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
- 纯css3圆形从中心向四周扩散动画效果
查看效果:http://hovertree.com/texiao/css3/37/ 先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to { ...
随机推荐
- CF1027E Inverse Coloring
题意:n × n的矩阵,每个位置可以被染成黑/白色. 一种gay的染色是任意相邻两行的元素,每两个要么都相同,要么都不同.列同理. 一种gaygay的染色是一种gay的染色,其中没有哪个颜色的子矩阵大 ...
- 洛谷P2469 星际竞速
上下界费用流比较无脑,提供一种更巧妙的费用流,无需上下界. #include <cstdio> #include <algorithm> #include <queue& ...
- 2-SAT问题的方案输出
2-sat 推荐学习资料: 伍昱的2003年IOI国家集训队论文<由对称性解2-sat问题> 论文链接:https://wenku.baidu.com/view/31fd7200bed5b ...
- 流媒体技术学习笔记之（九）减少VLC 延迟的方法
之前写过一篇关于在Linux平台上编译Android平台上VLC播放器源代码的文章,vlc这款播放器非常优秀而且是开源的,它的核心是开源视频编解码库ffmpeg.而且这款播放器还支持RTSP协议,这个 ...
- JavaScript 中创建三种消息框：警告框、确认框、提示框。
网址:http://www.w3school.com.cn/js/js_popup.asp 警告框 警告框经常用于确保用户可以得到某些信息. 当警告框出现后,用户需要点击确定按钮才能继续进行操作. 语 ...
- Oracle PLSql配置
1.安装Oracle客户端或者服务端 2.配置环境变量 <1>.一般如果安装了Oracle客户端或者服务端的话,在环境变种的Path中有Oracle的安装路径(计算机-属性-高级系统设置- ...
- [Alg::Trick]小白鼠找毒酒
题目来源:牛客网 https://www.nowcoder.com/questionTerminal/c26c4e43c77440ee9497b20118871bf1 8瓶酒一瓶有毒,用人测试.每次测 ...
- 使用phpstorm+wamp实现php代码实时调试审计
转载自:https://www.bugbank.cn/q/article/5853afaffc0bf4f010ee6ac3.html php调试有N多好用的工具,最近研究到phpstorm配合wamp ...
- Useful Online Resources for New Hackers
出处:https://www.hackerone.com/blog/resources-for-new-hackers HackerOne喜欢花时间与活跃的黑客和有兴趣学习如何破解的人交谈. 就在上周 ...
- flask基础之Response响应对象（九）
前言 Response对象负责对客户端的响应,每一个请求都会有一个Response对象,那么它在一个请求的声明周期内是怎么发挥作用的呢? Response对象 响应发生的位置 先回顾一下http请求的 ...