案例效果：
代码如下：
js:
var stars = document.getElementById('stars')// js随机生成流星for (var j=0;j<30;j++) {var newStar = document.createElement("div")newStar.className = "star"newStar.style.top = randomDistance(500, -100) + 'px'newStar.style.left = randomDistance(1300, 300) + 'px'stars.appendChild(newStar)}// 封装随机数方法function randomDistance (max, min) {var distance = Math.floor(Math.random() * (max - min + 1) + min)return distance}var star = document.getElementsByClassName('star')// 给流星添加动画延时for (var i = 0, len = star.length; i < len; i++){star[i].style.animationDelay = i % 6 == 0 ? '0s' : i * 0.8 + 's'}
css:
html, body {width: 100%;height: 100%;margin: 0;overflow: hidden;background: linear-gradient(rgba(0, 108, 172, 1), rgba(0, 122, 195, .7));}#stars {margin: 0 auto;max-width: 1600px;position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 2;}.star {display: block;width: 1px;background: transparent;position: relative;opacity: 0;/*过渡动画*/ animation: star-fall 3s linear infinite;-webkit-animation: star-fall 3s linear infinite;-moz-animation: star-fall 3s linear infinite;}.star:after {content: '';display: block;border: 0px solid #fff;border-width: 0px 90px 2px 90px;border-color: transparent transparent transparent rgba(255, 255, 255, .5);box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);/*变形*/ transform: rotate(-45deg) translate3d(1px, 3px, 0);-webkit-transform: rotate(-45deg) translate3d(1px, 3px, 0);-moz-transform: rotate(-45deg) translate3d(1px, 3px, 0);transform-origin: 0% 100%;-webkit-transform-origin: 0% 100%;-moz-transform-origin: 0% 100%;}@keyframes star-fall {0% {opacity: 0;transform: scale(0.5) translate3d(0, 0, 0);-webkit-transform: scale(0.5) translate3d(0, 0, 0);-moz-transform: scale(0.5) translate3d(0, 0, 0);}50% {opacity: 1;transform: translate3d(-200px, 200px, 0);-webkit-transform: translate3d(-200px, 200px, 0);-moz-transform: translate3d(-200px, 200px, 0);}100% {opacity: 0;transform: scale(1.2) translate3d(-300px, 300px, 0);-webkit-transform: scale(1.2) translate3d(-300px, 300px, 0);-moz-transform: scale(1.2) translate3d(-300px, 300px, 0);}}
html:
<div id="stars"></div>
