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

清疚 2022-08-07 08:49 196阅读 0赞

主要涉及到了以下属性：

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

<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;
    }
    .keTitle{
    	height:100px;
    	line-height:100px;
    	font-size:30px;
    	font-family:'微软雅黑';
    	color:#fff;
    	text-align:center;
    	background:url(../images/bodyBg3.jpg) repeat-x bottom left;
    	font-weight:normal;
    	margin-bottom:0;
    }
    .kePublic{
    	background:#cccccc;
    	padding:50px;
    }
    .playground{
    	position:relative;
    	width:140px;
    	height:400px;
    	left:50%;
    	margin-left:-70px;
    }
    .flame{
    	  opacity: 0;
    	  position: absolute;
    	  bottom: 60%;
    	  left: 42%;
    	  width: 14px;
    	  height: 70px;
    	  background-color: white;
    	  border-radius: 100% 100% 0 0;
    	  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;
    	  
    }
    .playground:hover .flame {
    	opacity:1;
    	transition:opacity 3s linear;
    	-webkit-animation:flame 1s infinite linear;
    
    }
    .playground:hover .lid{
    	-webkit-animation:lidoff 1s linear;
    	/*把物体动画地从一个地方移动到另一个地方，并让它停留在那里：*/
    	-webkit-animation-fill-mode:forwards;
    }
    .lighterBody{
    	position:absolute;
    	width:140px;
    	height:130px;
    	top:200px;
    	left:0;
    	background-image:linear-gradient(to right,#959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,
    		   #4e4e4e 76%,#383838 87%,#1b1b1b 100%);
    	border-radius:2% 2% 8% 8%;
    	box-shadow:inset 0 0 5px 5px #333;
    }
    .lighterBody:before{
    	width:47px;
    	height:47px;
    	top:-50px;
    	left: 42px;
    	content:"...";
    	color:#e6e6e6;
    	border-radius:6% 6% 0 0;
    	background-image:linear-gradient(to right,#f5f5f5 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
    	font-size:30px;
    	font-weight:bold;
    	letter-spacing:7px;
    	line-height:16px;
    	text-shadow:0 0 5px black;
    	padding-top:3px;
    	padding-left:4px;
    }
    .lighterBody:after{
    	width:33px;
    	height:33px;
    	background-image:radial-gradient(ellipse at center,#7d737d 0%,#0e0e0e 100%);
    	border-radius:100%;
    	top:-33px;
    	left:10px;
    	box-shadow:inset 0 0 1px 2px gray;
    }
    .lid{
    	z-index:2;
    	position:absolute;
    	width:140px;
    	height:75px;
    	top:125px;
    	left:0;
    	background:linear-gradient(to right,#959595 0%,#0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%);
    	border-radius:8% 8% 2% 2%;
    	box-shadow:inset 0 0 5px 5px #333;
    	/*border-bottom:3px solid #f2f2f2;*/
    }
    .lid:before{
    	width:10px;
    	height:10px;
    	top:70px;
    	left:133px;
    	background-image:radial-gradient(ellipse at center, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%);
    	border-radius:100%;
    }
    
    .hover{
    	z-index:1;
    	text-align:center;
    	margin-top:30%;
    	color:rgba(255,255,255,0.9);
    	text-shadow:0 1px 1px rgba(0,0,0,0.8);
    	font: 20px "微软雅黑";
    }
    .hover:before{
    	content:"";
    	z-index:1;
    	width:0;
    	height:0;
    	top:-50px;
    	left:20px;
    	border-bottom:35px solid #f2f2f2;
    	/*border-left:10px solid transparent;*/
    }
    @-webkit-keyframes flame{
    	0%{
    		height:70px;
    		transform:skewY(0deg);
    		border-radius:100% 100% 0 0;
    	}
    	25%{
    		height:60px;
    		transform:skewY(40deg);
    		border-radius:10% 100% 0 0;
    	}
    	60%{
    		height:65px;
    		transform:skewY(-20deg);
    		border-radius:90% 10% 0 0;
    	}
    	70%{
    		height:50px;
    		transform:skewY(10deg);
    		border-radius:10% 100% 0 0;
    	}
    	100%{
    		height:70px;
    		tranform:skewY(0deg);
    	}
    }
    @-webkit-keyframes lidoff{
    	from{
    		transform:rotate(0deg);
    		transform-origin:100% 100%;
    	}
    	to{
    		transform:rotate(130deg);
    		transform-origin:100% 100%;
    	}
    }</span>

初始照片：

![Center][]

动态照片

![Center 1][]

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

<span style="font-family:Comic Sans MS;font-size:12px;">@-webkit-keyframes lidoff{     注意这里要加上-webkit-
         from{
              transform:rotate(0deg);
              transform-origin:100% 100%;
         }
         to{
              transform:rotate(130deg);
              transform-origin:100% 100%;
         }
    } 
    </span>

第二个动画是蜡烛灯光效果的实现：蜡烛由按变量是由**transition:opacity 3s linear;** 实现的，

蜡烛灯光的随风摆动效果是由下面的代码实现的：

<span style="font-family:Comic Sans MS;font-size:12px;">@-webkit-keyframes lidoff{
         from{
              transform:rotate(0deg);
              transform-origin:100% 100%;
         }
         to{
              transform:rotate(130deg);
              transform-origin:100% 100%;
         }
    }</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中的伪类是（单冒号）**

规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

**background-image:**解决了div只能设置一个背景的问题，使一个div可以设置多个背景图片。

**box-shadow:**一个经常被遗忘的参数-- **spread(扩展阴影半径)**,这个曾经被遗忘的spread改变阴影的大小---其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之是负值，则缩小。有了这个参数后可以使用box-shadow像photoshop中的阴影工作一样，制作单边阴影效果。这里注意一点，这个扩展阴影值需要和阴影模糊半径配合使用，一般情况是“扩展阴影半径一般设置为和模糊半径大小，并去其负值”

[Center]: /images/20220805/69e38d7086f24b23bbc89c407dd6067b.png
[Center 1]: /images/20220805/7b6e6decf0c440d6bc10a5364bd5774d.png