本文主要包含CSS3,打火机,火焰等相关知识,佚名 希望在学习及工作中可以帮助到您
本文实例为大家分享了纯CSS3绘制打火机动画火焰效果的具体代码，供大家参考，具体内容如下
主要涉及到了以下属性：
- <span style="font-family:Comic Sans MS;">animation(webkit-animation),
- @keyframes name (@-webkit-keyframes name),
- transform,
- transform-origin,
- transition,
- box-shadow（spread属性）,
- text-shadow
- z-index
- linear-gradient。
- radial-gradient
- background-image
- </span>
首先html代码如下：
- <span style="font-family:Comic Sans MS;"><!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>纯CSS绘制打火机动画火焰特效</title>
- <link rel="stylesheet" href="css/style.css">
- </head>
- <body class="keBody">
- <h1 class="keTitle">纯CSS3绘制打火机动画火焰特效</h1>
- <div class="kePublic">
- <div class="playground">
- <div class="flame"></div>
- <div class="lighterBody">
- <div class="hover">hover me</div>
- </div>
- <div class="lid"></div>
- </div>
- <div class="clear"></div>
- </div>
- </body>
- </html></span>
style.css文件如下：
复