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

网络
快乐总和宽厚的人相伴，财富总与诚信的人相伴，智慧总与高尚的人相伴，魅力总与幽默的人相伴，健康总与豁达的人相伴。

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

主要涉及到了以下属性：

XML/HTML Code复制内容到剪贴板
  1. <spanstyle="font-family:ComicSansMS;">animation(webkit-animation),
  2. @keyframesname(@-webkit-keyframesname),
  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. <spanstyle="font-family:ComicSansMS;"><!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>纯CSS绘制打火机动画火焰特效</title>
  6. <linkrel="stylesheet"rel="nofollow noopener noreferrer" href="css/style.css">
  7. </head>
  8. <bodyclass="keBody">
  9. <h1class="keTitle">纯CSS3绘制打火机动画火焰特效</h1>
  10. <divclass="kePublic">
  11. <divclass="playground">
  12. <divclass="flame"></div>
  13. <divclass="lighterBody">
  14. <divclass="hover">hoverme</div>
  15. </div>
  16. <divclass="lid"></div>
  17. </div>
  18. <divclass="clear"></div>
  19. </div>
  20. </body>
  21. </html></span>

style.css文件如下：

CSS Code复制内容到剪贴板
  1. <spanstyle="font-family:ComicSansMS;">@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-xbottombottomleft;
  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. position:absolute;
  41. bottombottom:60%;
  42. left:42%;
  43. width:14px;
  44. height:70px;
  45. background-color:white;
  46. border-radius:100%100%00;
  47. 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;
  49. }
  50. .playground:hover.flame{
  51. opacity:1;
  52. transition:opacity3slinear;
  53. -webkit-animation:flame1sinfinitelinear;
  55. }
  56. .playground:hover.lid{
  57. -webkit-animation:lidoff1slinear;
  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(torightright,#9595950%,#0d0d0d46%,#01010150%,#0a0a0a53%,
  68. #4e4e4e76%,#38383887%,#1b1b1b100%);
  69. border-radius:2%2%8%8%;
  70. box-shadow:inset005px5px#333;
  71. }
  72. .lighterBody:before{
  73. width:47px;
  74. height:47px;
  75. top:-50px;
  76. left:42px;
  77. content:"...";
  78. color:#e6e6e6;
  79. border-radius:6%6%00;
  80. background-image:linear-gradient(torightright,#f5f5f50%,#dbdce221%,#b8bac649%,#dddfe380%,#f5f6f6100%);
  81. font-size:30px;
  82. font-weight:bold;
  83. letter-spacing:7px;
  84. line-height:16px;
  85. text-shadow:005pxblack;
  86. padding-top:3px;
  87. padding-left:4px;
  88. }
  89. .lighterBody:after{
  90. width:33px;
  91. height:33px;
  92. background-image:radial-gradient(ellipseatcenter,#7d737d0%,#0e0e0e100%);
  93. border-radius:100%;
  94. top:-33px;
  95. left:10px;
  96. box-shadow:inset001px2pxgray;
  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(torightright,#9595950%,#0d0d0d46%,#01010150%,#0a0a0a53%,#4e4e4e76%,#38383887%,#1b1b1b100%);
  106. border-radius:8%8%2%2%;
  107. box-shadow:inset005px5px#333;
  108. /*border-bottom:3pxsolid#f2f2f2;*/
  109. }
  110. .lid:before{
  111. width:10px;
  112. height:10px;
  113. top:70px;
  114. left:133px;
  115. background-image:radial-gradient(ellipseatcenter,#9595950%,#0d0d0d46%,#01010150%,#0a0a0a53%,#4e4e4e76%,#38383887%,#1b1b1b100%);
  116. border-radius:100%;
  117. }
  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:01px1pxrgba(0,0,0,0.8);
  125. font:20px"微软雅黑";
  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:35pxsolid#f2f2f2;
  135. /*border-left:10pxsolidtransparent;*/
  136. }
  137. @-webkit-keyframesflame{
  138. 0%{
  139. height:70px;
  140. transform:skewY(0deg);
  141. border-radius:100%100%00;
  142. }
  143. 25%{
  144. height:60px;
  145. transform:skewY(40deg);
  146. border-radius:10%100%00;
  147. }
  148. 60%{
  149. height:65px;
  150. transform:skewY(-20deg);
  151. border-radius:90%10%00;
  152. }
  153. 70%{
  154. height:50px;
  155. transform:skewY(10deg);
  156. border-radius:10%100%00;
  157. }
  158. 100%{
  159. height:70px;
  160. tranform:skewY(0deg);
  161. }
  162. }
  163. @-webkit-keyframeslidoff{
  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>

初始照片：

动态照片

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

XML/HTML Code复制内容到剪贴板
  1. <spanstyle="font-family:ComicSansMS;font-size:12px;">@-webkit-keyframeslidoff{注意这里要加上-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. <spanstyle="font-family:ComicSansMS;font-size:12px;">@-webkit-keyframeslidoff{
  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中的阴影工作一样，制作单边阴影效果。这里注意一点，这个扩展阴影值需要和阴影模糊半径配合使用，一般情况是“扩展阴影半径一般设置为和模糊半径大小，并去其负值”

到此这篇关于纯CSS3绘制打火机动画火焰效果就介绍到这了。人生之路上，永远没有后悔药可以买。我们无法回到过去，那就更加应该把握住现在，而不让将来的我们为现在而后悔。更多相关纯CSS3绘制打火机动画火焰效果内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！