css3绘制星空下正在高速飞行的航天飞机动画场景特效。
使用方法
1、head引入css文件
<link rel="stylesheet" href="css/style.css">2、body引入HTML代码
<div class="container"> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="trigger"></div> <div class="monitor"> <div id="awing"> <div class="stars"> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> </div> <div class="fly_x"> <div class="fly_y"> <div class="fly_z"> <div class="body"> <div class="cockpit"> <div class="under"></div> <div class="back"></div> <div class="left"></div> <div class="right"></div> <div class="edge_left"></div> <div class="edge_right"></div> <div class="boosts"> <div class="boost"></div> <div class="boost"></div> <div class="boost"></div> <div class="boost"></div> <div class="boost"></div> <div class="boost"></div> <div class="boost"></div> <div class="boost"></div> <div class="boost"></div> <div class="boost"></div> <div class="boost"></div> <div class="boost"></div> <div class="boost"></div> <div class="boost"></div> <div class="boost"></div> <div class="boost"></div> <div class="boost"></div> <div class="boost"></div> <div class="boost"></div> <div class="boost"></div> <div class="boost"></div> <div class="boost"></div> <div class="boost"></div> <div class="boost"></div> <div class="boost"></div> <div class="boost"></div> <div class="boost"></div> <div class="boost"></div> <div class="boost"></div> <div class="boost"></div> </div> </div> <div class="wing_left"> <div class="under"></div> <div class="back"></div> <div class="left"></div> <div class="right"></div> </div> <div class="wing_right"> <div class="under"></div> <div class="back"></div> <div class="left"></div> <div class="right"></div> </div> </div> </div> </div> </div> </div> </div> </div>
