纯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 { ...
随机推荐
- C#代码连接Oracle数据库一段时间以后[connection lost contact]的问题
最近在使用C#代码连接Oracle数据库,分为两部分,WCF的客户端与服务端.程序启动与运行都没有问题,部署到服务器上后,运行也没有问题.但是第二天再访问的时候,就会抛出下边所示的异常.这是怎么回事? ...
- Flask script 内的Shell 类 使用
1.集成Python shell 每次自动shell会话都要导入数据库实例和模型,很烦人.为了避免一直重复导入,我们可以做些配置让Flask-Script的Shell命令自动导入特定的对象.若想把对象 ...
- Spark记录-Scala语句（运算符-if-for-while-try-模式匹配）
Scala条件运算符 Scala条件运算符在下表中列出. 运算符 操作 描述 && 与 运算符左侧和右侧的值为true.仅当左侧为真时,右侧才被计算. || 或 左侧或右侧的至少一个值 ...
- CSS规范 - 优化方案--（来自网易）
值缩写 缩写值可以减少CSS文件大小,并增加可读性和可维护性. 但并非所有的值都必须缩写,因为当一个属性的值缩写时,总是会将所有项都设置一遍,而有时候我们不希望设置值里的某些项. /* 比如我们用下面 ...
- .net中的一般处理程序实例
最近在学习一般处理程序,也学习了一些jQuery的异步操作,于是就想着亲手做一个小的登陆,锻炼一下自己. 1.首先新建了一个项目LoginDemo,在此基础上又添加了一个一般处理程序BackLogin ...
- 【洛谷P3884 [JLOI2009]】二叉树问题
题目描述 如下图所示的一棵二叉树的深度.宽度及结点间距离分别为: 深度:4 宽度:4(同一层最多结点个数) 结点间距离: ⑧→⑥为8 (3×2+2=8) ⑥→⑦为3 (1×2+1=3) 注:结点间距离 ...
- Codeforces 238 div2 A. Gravity Flip
题目链接:http://codeforces.com/contest/405/problem/A 解题报告:有n列箱子竖直放置,每列箱子上都有数量不等的箱子,这些箱子之间没有固定,当重力方向改为平行向 ...
- [转]hisi mmz模块驱动讲解
一.概述 如图所示,在海思平台上将内存分为两个部分:os内存和mmz内存.os内存指:由linux操作系统管理的内存:mmz内存:由mmz驱动模块进行管理供媒体业务单独使用的内存,在驱动加载时可以指定 ...
- 5 THINGS TOP BUG BOUNTY HUNTERS DO DIFFERENTLY
出处:https://www.hackerone.com/blog/5-things-top-bug-bounty-hunters-do-differently 本周,我们有幸收容了50名比利时科技学 ...
- usb device address error 110
ubuntu失灵了,怎么都起不来,报一堆错误usb device descriptor read/64, error 110......重启,换kvm的接口,usb键盘鼠标...终于在试了下面这个方法 ...