Html
    Css
    Js

    
                        
.index {
	position:fixed;
	width:100%;
	background:#000000;
	height:100%;
}
#stars {
	width:100%;
}
.star {
	display:block;
	width:5px;
	height:5px;
	border-radius:50%;
	background:#FFF;
	position:absolute;
	transform-origin:100% 0;
	animation:star-ani 4s linear infinite;
	-webkit-animation:star-ani 5s linear infinite;
	box-shadow:0 0 5px 5px rgba(255,255,255,.3);
	opacity:0;
	z-index:2;
}
.star:after {
	content:'';
	display:block;
	top:0px;
	left:4px;
	border:0px solid #fff;
	border-width:0px 90px 2px 90px;
	border-color:transparent transparent transparent rgba(255,255,255,.3);
	transform:rotate(-45deg) translate3d(1px,3px,0);
	box-shadow:0 0 1px 0 rgba(255,255,255,.1);
	transform-origin:0% 100%;
}
@keyframes star-ani {
	0% {
	opacity:0;
	transform:scale(0) translate3d(0,0,0);
}
20% {
	opacity:0.8;
	transform:scale(0.2) translate3d(-100px,100px,0);
}
40% {
	opacity:0.8;
	transform:scale(0.4) translate3d(-200px,200px,0);
}
60% {
	opacity:0.8;
	transform:scale(0.6) translate3d(-300px,300px,0);
}
80% {
	opacity:1;
	transform:scale(1) translate3d(-350px,350px,0);
}
100% {
	opacity:1;
	transform:scale(1.2) translate3d(-400px,380px,0);
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

原生js流星雨

// js随机生成流星
for (var j = 0; j < 20; j++) {
    var newstar = document.createelement("div")
    newstar.classname = "star"
    newstar.style.top = randomdistance(500, -100) + 'px'
    newstar.style.left = randomdistance(1980, 300) + 'px'
    stars.appendchild(newstar)
}

可改变j增加或减少生成的数量

0