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

作者：佚名字体：[增加减小] 来源：互联网时间：2017-06-02

本文主要包含html5 css3动画特效,css3关键帧动画,css3 3d旋转动画,css3动画特效,css3动画等相关知识,佚名希望在学习及工作中可以帮助到您

本文实例为大家分享了纯CSS3绘制打火机动画火焰效果的具体代码，供大家参考，具体内容如下

主要涉及到了以下属性：

</div>

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

</div> </div>

首先html代码如下：

</div>

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

</div> </div>

style.css文件如下：

您可能想查找下面的文章:

相关文章