html 星空效果,使用css实现星空效果！

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;

}

}

var w = document.documentElement.clientWidth1.2;

var h = document.documentElement.clientHeight1.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;