您的位置:首页 - 教程 - CSS - 正文
css3鼠标悬停(hover)打开打火机代码

效果体验:http://hovertree.com/texiao/css/8.htm

HTML文件代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS3鼠标悬停(hover)打开打火机 - 何问起</title><base target="_blank" />
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/css/8/csshover.css" />
<script src="http://hovertree.com/texiao/css/8/prefixfree.min.js"></script>
<style>a{color:blue}
.hvtholder {
width: 789px;
margin: 10px auto;
}
</style>
</head>
<body>
<div class="hvtholder">
<a href="http://hovertree.com">首页</a>
<a href="http://hovertree.com/hvtart/bjae/f00c3t0c.htm">原文</a>
<a href="http://hovertree.com/texiao/">特效</a>
<br />纯CSS3实现蜡烛打火机火焰动画
</div>
<div class='groundhovertree'>
<div class='flame'></div>
<div class='lighterBody'>
<div class='hover'>鼠标悬停(hover)打开</div>
</div>
<div class='lid'></div>
</div>
</body>
</html>

评论: