纯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% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes tail {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shooting {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
}
@keyframes shooting {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
}

3.css布局不展示了，下面为代码地址，欢迎评论交流

代码地址：https://github.com/dong1220/meteor