纯CSS3实现流星划过动画

1.html ：创建几个流星

<div class="meteor-body">
	<div class="main-con">
		<div class="shooting_star"></div>
		<div class="shooting_star"></div>
		<div class="shooting_star"></div>
		<div class="shooting_star"></div>
		<div class="shooting_star"></div>
		<div class="shooting_star"></div>
		<div class="shooting_star"></div>
	</div>
</div>

2.css动画：如下图所示，流星坠落过程有两个动画

（1）流星渐变淡入淡出动画

（2）流星坠落动画

动画代码如下所示：

/* 动画 */
@-webkit-keyframes tail {
  0% {