纯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布局不展示了，下面为代码地址，欢迎评论交流

代码地址：/dong1220/meteor