css實(shí)現(xiàn)星空效果

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;

//隨機(jī)函數(shù)

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;

總結(jié)

以上是生活随笔為你收集整理的html 星空效果,使用css实现星空效果！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。