纯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 { ...
随机推荐
- eos交易同步过程和区块生产过程源码分析
交易同步过程 1 通过命令cleos调用 cleos transfer ${from_account} ${to_account} ${quantity} 发起交易2 eos调用chain_plugi ...
- python爬虫 Scrapy2-- 爬取豆瓣电影TOP250
sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频) https://study.163.com/course/introduction.htm?courseId=1005269003& ...
- P3173 [HAOI2009]巧克力 && P1324 矩形分割
题目描述 出于某些方面的需求,我们要把一块N×M的木板切成一个个1×1的小方块. 对于一块木板,我们只能从某条横线或者某条竖线(要在方格线上),而且这木板是不均匀的,从不同的线切割下去要花不同的代价. ...
- Golang的交互模式进阶-读取用户的输入
Golang的交互模式进阶-读取用户的输入 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 读写数据除了 fmt 和 os 包,我们还需要用到 bufio 包来处理缓冲的输入和输出. ...
- Spark记录-Scala类和对象
本章将介绍如何在Scala编程中使用类和对象.类是对象的蓝图(或叫模板).定义一个类后,可以使用关键字new来创建一个类的对象. 通过对象可以使用定义的类的所有功能. 下面的图通过一个包含成员变量(n ...
- C#获取文件超大图标256*256(转）
从Bing搜索得到,保存于此 using System; using System.Collections.Generic; using System.Linq; using System.Text; ...
- crontab定时任务2_net
2017年2月25日, 星期六 crontab定时任务2_net 1.先来一个小小的例子 查看当前路径: [root@root test]# pwd /home/admin/test [root@ro ...
- 重启虚拟目录或站点，不重启iis
更改站点或虚拟目录的.net Framework 版本会导致重启整个iis服务,所以需要单独重启某个站点或虚拟目录 首先右键点击网站-所有任务-将配置保存到一个文件,从文件中查找到 Location ...
- Maven部署dao工程到私服上——（十三）
1.修改settings.xml 需要在客户端即(部署dao工程)的电脑上配置 maven环境,并修改 settings.xml 文件,配置连接私服的用户和密码 . 此用户名和密码用于私服校验,因为私 ...
- House Robber I & II & III
House Robber You are a professional robber planning to rob houses along a street. Each house has a c ...