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>
