純CSS3繪制打火機動畫火焰效果

2024-07-11 08:36:07

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了純CSS3繪制打火機動畫火焰效果的具體代碼，供大家參考，具體內容如下

主要涉及到了以下屬性：

XML/HTML Code復制內容到剪貼板

<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代碼如下：

XML/HTML Code復制內容到剪貼板

<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文件如下：

CSS Code復制內容到剪貼板

<span style="font-family:Comic Sans MS;">@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;