纯CSS3绘制打火机动画火焰效果


Posted in HTML / CSS onJuly 18, 2016

本文实例为大家分享了纯CSS3绘制打火机动画火焰效果的具体代码,供大家参考,具体内容如下

主要涉及到了以下属性:

XML/HTML Code复制内容到剪贴板
  1. <span style="font-family:Comic Sans MS;">animation(webkit-animation),   
  2. @keyframes name (@-webkit-keyframes name),   
  3. transform,   
  4. transform-origin,   
  5. transition,   
  6. box-shadow(spread属性),   
  7. text-shadow   
  8. z-index   
  9. linear-gradient。   
  10. radial-gradient   
  11. background-image    
  12. </span>  

 
首先html代码如下:

XML/HTML Code复制内容到剪贴板
  1.  <span style="font-family:Comic Sans MS;"><!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="UTF-8">  
  5.   <title>纯CSS绘制打火机动画火焰特效</title>  
  6.   <link rel="stylesheet" href="css/style.css">  
  7.  </head>  
  8.  <body class="keBody">  
  9.   <h1 class="keTitle">纯CSS3绘制打火机动画火焰特效</h1>  
  10.   <div class="kePublic">  
  11.    <div class="playground">  
  12.     <div class="flame"></div>  
  13.     <div class="lighterBody">  
  14.      <div class="hover">hover me</div>  
  15.     </div>  
  16.     <div class="lid"></div>  
  17.    </div>  
  18.    <div class="clear"></div>  
  19.   </div>    
  20.  </body>  
  21. </html></span>   

style.css文件如下:

CSS Code复制内容到剪贴板
  1. <span style="font-family:Comic Sans MS;">@charset "utf-8";   
  2. body{   
  3.  margin:0;   
  4.  padding:0;   
  5.  color:#333;   
  6.  text-align:center;   
  7.  font:12px "微软雅黑";   
  8. }   
  9. :before,:after{   
  10.  position:absolute;   
  11.  content:"";   
  12. }   
  13. .keBody{   
  14.  background:url(../images/bodyBg.jpg) repeat #333;   
  15. }   
  16. .keTitle{   
  17.  height:100px;   
  18.  line-height:100px;   
  19.  font-size:30px;   
  20.  font-family:'微软雅黑';   
  21.  color:#fff;   
  22.  text-align:center;   
  23.  background:url(../images/bodyBg3.jpg) repeat-x bottombottom left;   
  24.  font-weight:normal;   
  25.  margin-bottom:0;   
  26. }   
  27. .kePublic{   
  28.  background:#cccccc;   
  29.  padding:50px;   
  30. }   
  31. .playground{   
  32.  position:relative;   
  33.  width:140px;   
  34.  height:400px;   
  35.  left:50%;   
  36.  margin-left:-70px;   
  37. }   
  38. .flame{   
  39.    opacity: 0;   
  40.    positionabsolute;   
  41.    bottombottom: 60%;   
  42.    left: 42%;   
  43.    width14px;   
  44.    height70px;   
  45.    background-colorwhite;   
  46.    border-radius: 100% 100% 0 0;   
  47.    box-shadow: 0 0 20px #FFFEF0, 0 0 20px #FFFEE6, 0 0 20px #fefcc9,  10px -10px 30px #feec85,  -20px -20px 40px #ffae34,  20px -40px 50px #ec760c,  -20px -60px 60px #cd4606,  0 -80px 70px #973716,  10px -90px 80px #451b0e;   
  48.       
  49. }   
  50. .playground:hover .flame {   
  51.  opacity:1;   
  52.  transition:opacity 3s linear;   
  53.  -webkit-animation:flame 1s infinite linear;   
  54.   
  55. }   
  56. .playground:hover .lid{   
  57.  -webkit-animation:lidoff 1s linear;   
  58.  /*把物体动画地从一个地方移动到另一个地方,并让它停留在那里:*/  
  59.  -webkit-animation-fill-mode:forwards;   
  60. }   
  61. .lighterBody{   
  62.  position:absolute;   
  63.  width:140px;   
  64.  height:130px;   
  65.  top:200px;   
  66.  left:0;   
  67.  background-image:linear-gradient(to rightright,#959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,   
  68.      #4e4e4e 76%,#383838 87%,#1b1b1b 100%);   
  69.  border-radius:2% 2% 8% 8%;   
  70.  box-shadow:inset 0 0 5px 5px #333;   
  71. }   
  72. .lighterBody:before{   
  73.  width:47px;   
  74.  height:47px;   
  75.  top:-50px;   
  76.  left42px;   
  77.  content:"...";   
  78.  color:#e6e6e6;   
  79.  border-radius:6% 6% 0 0;   
  80.  background-image:linear-gradient(to rightright,#f5f5f5 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);   
  81.  font-size:30px;   
  82.  font-weight:bold;   
  83.  letter-spacing:7px;   
  84.  line-height:16px;   
  85.  text-shadow:0 0 5px black;   
  86.  padding-top:3px;   
  87.  padding-left:4px;   
  88. }   
  89. .lighterBody:after{   
  90.  width:33px;   
  91.  height:33px;   
  92.  background-image:radial-gradient(ellipse at center,#7d737d 0%,#0e0e0e 100%);   
  93.  border-radius:100%;   
  94.  top:-33px;   
  95.  left:10px;   
  96.  box-shadow:inset 0 0 1px 2px gray;   
  97. }   
  98. .lid{   
  99.  z-index:2;   
  100.  position:absolute;   
  101.  width:140px;   
  102.  height:75px;   
  103.  top:125px;   
  104.  left:0;   
  105.  background:linear-gradient(to rightright,#959595 0%,#0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%);   
  106.  border-radius:8% 8% 2% 2%;   
  107.  box-shadow:inset 0 0 5px 5px #333;   
  108.  /*border-bottom:3px solid #f2f2f2;*/  
  109. }   
  110. .lid:before{   
  111.  width:10px;   
  112.  height:10px;   
  113.  top:70px;   
  114.  left:133px;   
  115.  background-image:radial-gradient(ellipse at center#959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%);   
  116.  border-radius:100%;   
  117. }   
  118.   
  119. .hover{   
  120.  z-index:1;   
  121.  text-align:center;   
  122.  margin-top:30%;   
  123.  color:rgba(255,255,255,0.9);   
  124.  text-shadow:0 1px 1px rgba(0,0,0,0.8);   
  125.  font20px "微软雅黑";   
  126. }   
  127. .hover:before{   
  128.  content:"";   
  129.  z-index:1;   
  130.  width:0;   
  131.  height:0;   
  132.  top:-50px;   
  133.  left:20px;   
  134.  border-bottom:35px solid #f2f2f2;   
  135.  /*border-left:10px solid transparent;*/  
  136. }   
  137. @-webkit-keyframes flame{   
  138.  0%{   
  139.   height:70px;   
  140.   transform:skewY(0deg);   
  141.   border-radius:100% 100% 0 0;   
  142.  }   
  143.  25%{   
  144.   height:60px;   
  145.   transform:skewY(40deg);   
  146.   border-radius:10% 100% 0 0;   
  147.  }   
  148.  60%{   
  149.   height:65px;   
  150.   transform:skewY(-20deg);   
  151.   border-radius:90% 10% 0 0;   
  152.  }   
  153.  70%{   
  154.   height:50px;   
  155.   transform:skewY(10deg);   
  156.   border-radius:10% 100% 0 0;   
  157.  }   
  158.  100%{   
  159.   height:70px;   
  160.   tranform:skewY(0deg);   
  161.  }   
  162. }   
  163. @-webkit-keyframes lidoff{   
  164.  from{   
  165.   transform:rotate(0deg);   
  166.   transform-origin:100% 100%;   
  167.  }   
  168.  to{   
  169.   transform:rotate(130deg);   
  170.   transform-origin:100% 100%;   
  171.  }   
  172. }</span>    

初始照片:

 

纯CSS3绘制打火机动画火焰效果

动态照片

纯CSS3绘制打火机动画火焰效果

动画效果主要有两个,一是当鼠标悬停在“hover me”上面时打火机盖子打开的情形,由下面的动画代码实现:

XML/HTML Code复制内容到剪贴板
  1.  <span style="font-family:Comic Sans MS;font-size:12px;">@-webkit-keyframes lidoff{     注意这里要加上-webkit-   
  2.      from{   
  3.           transform:rotate(0deg);   
  4.           transform-origin:100% 100%;   
  5.      }   
  6.      to{   
  7.           transform:rotate(130deg);   
  8.           transform-origin:100% 100%;   
  9.      }   
  10. }    
  11. </span>  

 第二个动画是蜡烛灯光效果的实现:蜡烛由按变量是由transition:opacity 3s linear; 实现的,
 
蜡烛灯光的随风摆动效果是由下面的代码实现的:

XML/HTML Code复制内容到剪贴板
  1. <span style="font-family:Comic Sans MS;font-size:12px;">@-webkit-keyframes lidoff{   
  2.     from{   
  3.          transform:rotate(0deg);   
  4.          transform-origin:100% 100%;   
  5.     }   
  6.     to{   
  7.          transform:rotate(130deg);   
  8.          transform-origin:100% 100%;   
  9.     }   
  10. </span>  

 将打火机盖与躯干分离的效果是由:box-shadow:inset 0 0 5px 5px #333; 主要是这里的inset(注意不要写成了insert)实现的。
 
当打火机打开时出现的圆球和白色的小正方形,是由:after :before 配合z-index实现的效果。 

下面来介绍通过这个例子我的学到的几个属性需要注意的地方。

transform-origin:  默认的初始位置是图像的中心,100% 100%相当于 right bottom.  0% 0%相当于  left top.

before  和:after  : 注入的内容是有关联的目标元素的字子元素,但它会被置于这个元素任何内容的“前” 或"后"。插入的内容在页面的源码里是看不见的,只能在css里看见。同时插入的元素在默认情况是内联元素。因此,为了给插入的元素赋予高度、填充、边距等等,通常必须显示的定义一个块级元素(display:block)。
 
此外,虽然可能不会插入任何内容,但是content必须写上,如果不插入任何内容,那么content写成    content:"";
 
IE6和IE7不兼容这两个为元素

伪元素(双冒号),css3中的伪类是(单冒号)

animation-fill-mode: none|forwards|backwards|both|initial|inherit;
 
规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。

background-image:解决了div只能设置一个背景的问题,使一个div可以设置多个背景图片。
 
box-shadow:一个经常被遗忘的参数--spread(扩展阴影半径),这个曾经被遗忘的spread改变阴影的大小---其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之是负值,则缩小。有了这个参数后可以使用box-shadow像photoshop中的阴影工作一样,制作单边阴影效果。这里注意一点,这个扩展阴影值需要和阴影模糊半径配合使用,一般情况是“扩展阴影半径一般设置为和模糊半径大小,并去其负值”

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 渐变(Gradients)之CSS3 径向渐变
Jul 08 HTML / CSS
CSS3轻松实现清新 Loading 效果的简单实例
Jun 06 HTML / CSS
css3实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 HTML / CSS
浅析几个CSS3常用功能的写法
Jun 05 HTML / CSS
css3的动画特效之动画序列(animation)
Dec 22 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 HTML / CSS
让IE下支持Html5的placeholder属性的插件
Sep 02 HTML / CSS
HTML5微信播放全屏问题的解决方法
Mar 09 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
Mar 24 HTML / CSS
Css预编语言及区别详解
Apr 25 HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 #HTML / CSS
CSS3实现时间轴效果
Jul 11 #HTML / CSS
CSS3实现10种Loading效果
Jul 11 #HTML / CSS
CSS3实现可爱的小黄人动画
Jul 11 #HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 #HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 #HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 #HTML / CSS
You might like
BBS(php &amp; mysql)完整版(四)
2006/10/09 PHP
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
在Django同1个页面中的多表单处理详解
2017/01/25 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
浅谈关于Python3中venv虚拟环境
2018/08/01 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
pandas的排序和排名的具体使用
2019/07/31 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
越南母婴用品购物网站:Kids Plaza
2020/04/09 全球购物
酒店门卫岗位职责
2013/12/29 职场文书
职业规划书如何设计?
2014/01/09 职场文书
上课打牌的检讨书
2014/02/15 职场文书
个人求职自荐信范文
2015/03/06 职场文书
实验室安全管理制度
2015/08/05 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python
python实现商品进销存管理系统
2022/05/30 Python