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

cwzhsi

于 2015-03-26 20:29:59 发布

阅读量1.3k

点赞数

分类专栏： css 文章标签： css3 animation transition transform box-shadow

本文链接：https://blog.csdn.net/cwzhsi/article/details/44655351

版权

本文详细介绍了如何使用纯CSS3绘制打火机动画火焰特效，涉及的关键技术包括animation、@keyframes、transform、transition、box-shadow等。通过调整不同属性如transform-origin、z-index和box-shadow，实现了打火机盖子开合、火焰摆动和蜡烛灯光效果。此外，还提到了:before和:after伪元素以及animation-fill-mode、background-image等属性的用法。

摘要由CSDN通过智能技术生成

主要涉及到了以下属性：

<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:10

最低0.47元/天解锁文章

cwzhsi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯CSS3绘制打火机动画火焰特效

主要涉及到了以下属性：animation(webkit-animation),@keyframes name (@-webkit-keyframes name),transform,transform-origin,transition,box-shadow（spread属性）,text-shadowz-indexlinear-gradient。radial-gradient
复制链接

扫一扫

专栏目录