css3 animation屬性繪制黑夜里的蠟燭火苗燃燒晃動特效。效果十分逼真。
使用方法:
1、head引入css文件
<link rel="stylesheet" href="css/style.css">
2、body引入HTML代碼
<div class="g-candle">
<div class="g-body"></div>
<div class="g-fire-box">
<div class="g-fire">
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
<div class="g-ball"> </div>
</div>
</div>
</div>