效果體驗: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>