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