今天小编跟大家讲解下有关纯CSS3绘制打火机动画火焰效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关纯CSS3绘制打火机动画火焰效果 的相关资料，希望小伙伴们看了有所帮助。
本文实例为大家分享了纯CSS3绘制打火机动画火焰效果的具体代码，供大家参考，具体内容如下
主要涉及到了以下属性：
XML/HTML Code复制内容到剪贴板 <spanstyle="font-family:ComicSansMS;">animation(webkit-animation), @keyframesname(@-webkit-keyframesname), transform, transform-origin, transition, box-shadow（spread属性）, text-shadow z-index linear-gradient。 radial-gradient background-image </span>首先html代码如下：
XML/HTML Code复制内容到剪贴板 <spanstyle="font-family:ComicSansMS;"><!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>纯CSS绘制打火机动画火焰特效</title> <linkrel="stylesheet"href="css/style.css"> </head> <bodyclass="keBody"> <h1class="keTitle">纯CSS3绘制打火机动画火焰特效</h1> <divclass="kePublic"> <divclass="playground"> <divclass="flame"></div> <divclass="lighterBody"> <divclass="hover">hoverme</div> </div> <divclass="lid"></div> </div> <divclass="clear"></div> </div> </body> </html></span>style.css文件如下：
CSS Code复制内容到剪贴板 <spanstyle="font-family:ComicSansMS;">@charset"utf-8"; body{ margin:0; padding:0; color:#333; text-align:center; font:12px"微软雅黑"; } :before,:after{ position:absolute; content:""; } .keBody{ background:url(../images/bodyBg.jpg)repeat#333; } .keTitle{ height:100px; line-height:100px; font-size:30px; font-family:'微软雅黑'; color:#fff; text-align:center; background:url(../images/bodyBg3.jpg)repeat-xbottombottomleft; font-weight:normal; margin-bottom:0; } .kePublic{ background:#cccccc; padding:50px; } .playground{ position:relative; width:140px; height:400px; left:50%; margin-left:-70px; } .flame{ opacity:0; position:absolute; bottombottom:60%; left:42%; width:14px; height:70px; background-color:white; border-radius:100%100%00; box-shadow:0020px#FFFEF0,0020px#FFFEE6,0020px#fefcc9,10px-10px30px#feec85,-20px-20px40px#ffae34,20px-40px50px#ec760c,-20px-60px60px#cd4606,0-80px70px#973716,10px-90px80px#451b0e; } .playground:hover.flame{ opacity:1; transition:opacity3slinear; -webkit-animation:flame1sinfinitelinear; } .playground:hover.lid{ -webkit-animation:lidoff1slinear; -webkit-animation-fill-mode:forwards; } .lighterBody{ position:absolute; width:140px; height:130px; top:200px; left:0; background-image:linear-gradient(torightright,#9595950%,#0d0d0d46%,#01010150%,#0a0a0a53%, #4e4e4e76%,#38383887%,#1b1b1b100%); border-radius:2%2%8%8%; box-shadow:inset005px5px#333; } .lighterBody:before{ width:47px; height:47px; top:-50px; left:42px; content:"..."; color:#e6e6e6; border-radius:6%6%00; background-image:linear-gradient(torightright,#f5f5f50%,#dbdce221%,#b8bac649%,#dddfe380%,#f5f6f6100%); font-size:30px; font-weight:bold; letter-spacing:7px; line-height:16px; text-shadow:005pxblack; padding-top:3px; padding-left:4px; } .lighterBody:after{ width:33px; height:33px; background-image:radial-gradient(ellipseatcenter,#7d737d0%,#0e0e0e100%); border-radius:100%; top:-33px; left:10px; box-shadow:inset001px2pxgray; } .lid{ z-index:2; position:absolute; width:140px; height:75px; top:125px; left:0; background:linear-gradient(torightright,#9595950%,#0d0d0d46%,#01010150%,#0a0a0a53%,#4e4e4e76%,#38383887%,#1b1b1b100%); border-radius:8%8%2%2%; box-shadow:inset005px5px#333; } .lid:before{ width:10px; height:10px; top:70px; left:133px; background-image:radial-gradient(ellipseatcenter,#9595950%,#0d0d0d46%,#01010150%,#0a0a0a53%,#4e4e4e76%,#38383887%,#1b1b1b100%); border-radius:100%; } .hover{ z-index:1; text-align:center; margin-top:30%; color:rgba(255,255,255,0.9); text-shadow:01px1pxrgba(0,0,0,0.8); font:20px"微软雅黑"; } .hover:before{ content:""; z-index:1; width:0; height:0; top:-50px; left:20px; border-bottom:35pxsolid#f2f2f2; } @-webkit-keyframesflame{ 0%{ height:70px; transform:skewY(0deg); border-radius:100%100%00; } 25%{ height:60px; transform:skewY(40deg); border-radius:10%100%00; } 60%{ height:65px; transform:skewY(-20deg); border-radius:90%10%00; } 70%{ height:50px; transform:skewY(10deg); border-radius:10%100%00; } 100%{ height:70px; tranform:skewY(0deg); } } @-webkit-keyframeslidoff{ from{ transform:rotate(0deg); transform-origin:100%100%; } to{ transform:rotate(130deg); transform-origin:100%100%; } }</span>初始照片：
动态照片
动画效果主要有两个，一是当鼠标悬停在“hover me”上面时打火机盖子打开的情形，由下面的动画代码实现：
XML/HTML Code复制内容到剪贴板 <spanstyle="font-family:ComicSansMS;font-size:12px;">@-webkit-keyframeslidoff{注意这里要加上-webkit- from{ transform:rotate(0deg); transform-origin:100%100%; } to{ transform:rotate(130deg); transform-origin:100%100%; } } </span>第二个动画是蜡烛灯光效果的实现：蜡烛由按变量是由transition:opacity 3s linear; 实现的，蜡烛灯光的随风摆动效果是由下面的代码实现的：
XML/HTML Code复制内容到剪贴板 <spanstyle="font-family:ComicSansMS;font-size:12px;">@-webkit-keyframeslidoff{ from{ transform:rotate(0deg); transform-origin:100%100%; } to{ transform:rotate(130deg); transform-origin:100%100%; } </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中的阴影工作一样，制作单边阴影效果。这里注意一点，这个扩展阴影值需要和阴影模糊半径配合使用，一般情况是“扩展阴影半径一般设置为和模糊半径大小，并去其负值”
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持爱蒂网。
来源：爱蒂网
