您现在的位置是：网站首页> 编程资料编程资料

纯CSS3绘制打火机动画火焰效果利用css实现浮雕效果示例代码html5使用canvas实现跟随光标跳动的火焰效果分享16款燃烧的火焰效果英文字体大宝库CSS3实现文字浮雕效果，镂刻效果，火焰文字

2021-09-04 922人已围观

简介 这篇文章主要为大家详细介绍了纯CSS3绘制打火机动画火焰效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了纯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;">>  
  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 mediv>  
  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. "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.    position: absolute;   
  41.    bottombottom: 60%;   
  42.    left: 42%;   
  43.    width: 14px;   
  44.    height: 70px;   
  45.    background-color: white;   
  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. 上一篇：如何判断PC端浏览器内核老生常谈css中float的用法CSS3实现iPhone滑动解锁功能代码响应式设计你需要了解的知识点CSS特殊性、继承与层叠CSS布局基础BFC CSS3绘制有活力的链接下划线css样式图片、渐变、相关小知识(必看)纯CSS3绘制各种不规则图形图标样式特效源码

    下一篇：浅谈css元素居中css 不定宽高的元素居中布局解决方案CSS实现元素居中原理解析CSS元素居中布局的简单方法CSS实现定位元素居中的方法html元素水平居中、垂直居中、水平垂直居中于其父级元素的方法css控制div中元素居中的示例css实现元素居中的N种方法

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网