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

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

2023-10-21 292人已围观

简介 这篇文章主要为大家详细介绍了纯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:cente

    上一篇：如何判断PC端浏览器内核老生常谈css中float的用法CSS3实现iPhone滑动解锁功能代码响应式设计你需要了解的知识点CSS特殊性、继承与层叠CSS布局基础BFC CSS3绘制有活力的链接下划线css样式图片、渐变、相关小知识(必看)纯CSS3绘制各种不规则图形图标样式特效源码

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

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网