html代码:
<div class="stars"></div>
css代码
html, body {height: 100%;overflow: hidden;}body {width: 100%;height:100%;background: #000;background-size: 100%;perspective: 500px;}.stars {position: absolute;top: 50%;left: 50%;width: 4px;height:4px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;animation: fly 2s linear infinite;transform-style: preserve-3d;}.stars:before, .stars:after {content: "";position: absolute;width: inherit;height: inherit;box-shadow: inherit;}.stars:before {transform: translateZ(-300px);opacity: .6;}.stars:after {transform: translateZ(-600px);opacity: .4;}@keyframes fly {from {transform: translateZ(0px);opacity: .6;}to {transform: translateZ(300px);opacity: 1;}}
js代码
var w = document.documentElement.clientWidth*1.2;var h = document.documentElement.clientHeight*1.2;var star = document.getElementsByClassName("stars")[0];var n = 1000;//随机函数function randomNum(m, n) {return Math.floor(Math.random() * (n - m + 1) + m);}var str = '';for (var i = 0; i < n; i++) {var numX = randomNum(-w, w);var numY = randomNum(-h, h);var color = 'rgb(' + randomNum(0, 255) + ',' + randomNum(0, 255) + ',' + randomNum(0, 255) + ')';str += numX +'px'+' ' + numY+'px'+' '+ color+',';}str = str.slice(0,-1);star.style.boxShadow = str;$(function(){$('#main').fadeOut();$('#main').fadeIn('slow');})