纯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 { ...
随机推荐
- JS中的继承链
我们首先定义一个构造函数Person,然后定义一个对象p,JS代码如下: function Person(name) { this.name = name; } var p = new Person( ...
- IDE和SDK
像我这种不是专科班出来的,真的很多概念都不太清楚,今天来说说IDE和SDK 简单的来说: IDE(集成开发环境 Integrated Development Environment) 就是我们编写代码 ...
- sqlserver运行脚本数据出现 内存不足的解决办法
但是当数据库导出脚本很大,用Microsoft SQL Server Management Studio执行脚本时,往往会遇到“内存不足”的提示. 解决办法: 用微软自带的sqlcmd工具,可以导入执 ...
- properties编程示例
package com.lovo.props; import java.io.FileInputStream;import java.io.FileNotFoundException;import j ...
- mysql日常笔记(持续更新)
常用场景 sql_mode问题:http://blog.csdn.net/ccccalculator/article/details/70432123 连续日期补全/数据补零操作 在不使用存储过程和函 ...
- JAVA记录-IntelliJ Idea 2017 免费激活方法（转载）
1. 到网站 http://idea.lanyus.com/ 获取注册码. 2.填入下面的license server: http://intellij.mandroid.cn/ http://ide ...
- PHP 文件加密Zend Guard Loader 学习和使用（如何安装ioncube扩展对PHP代码加密）
一.大体流程图 二.PHP 项目文件加密 下表列出了Zend产品中的PHP版本及其内部API版本和Zend产品版本. 如何加密请往后看 三.如何使用 第一步:确认当前环境 Amai Phalcon 前 ...
- 如何使用ASP.NET开发基于推技术的聊天室？
public class Content : System.Web.UI.Page{private void Page_Load(object sender, System.EventArgs e){ ...
- 【LibreOJ】#6392. 「THUPC2018」密码学第三次小作业 / Rsa 扩展欧几里得算法
[题目]#6392. 「THUPC2018」密码学第三次小作业 / Rsa [题意]T次询问,给定正整数c1,c2,e1,e2,N,求正整数m满足: \(c_1=m^{e_1} \ \ mod \ \ ...
- 200行代码实现RPC框架
之前因为项目需要,基于zookeeper和thrift协议实现了一个简单易用的RPC框架,核心代码不超过200行. zookeeper主要作用是服务发现,thrift协议作为通信传输协议, 基于com ...