html+css+css3+js实现动态星空

HTML:

结构页面创建一个id名的div盒子 CSS: body { background: radial-gradient(200% 10% at bottom center, #DE8887, #bebebe 40%, #242f4e); background: radial-gradient(220% 105% at bottom center, #DE8887, #bebebe 40%, #242f4e); background-attachment: fixed; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; }

@keyframes rotate {
0% {
transform: perspective(400px) rotateZ(200deg) rotateX(-40deg) rotateY(0);
}
100% {
transform: perspective(400px) rotateZ(200deg) rotateX(-40deg) rotateY(360deg);
}
}

#stars {
transform: perspective(500p);
transform-style: preserve-3d;
position: absolute;
perspective-origin: 50% 100%;
left: 50%;
right: 20%;
animation: rotate 90s infinite linear;
top: 0;
}

.star {
width: 4px;
height: 4px;
border-radius: 5px;
background-color: whitesmoke;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
}
CSS:给网页一个夜空的渐变背景，调节星空位置并打开3d维度，星星移动以动画的形式定义

JS：window.onload = function() {
var starcount = 900;
var distance = 800;
var stars = document.getElementById(“stars”);
for (var i = 0; i < starcount; i++) {
var speed = 0.1 + (Math.random() * 1);
var tdistance = distance + (Math.random() * 300)
stars.innerHTML += <div class="star" id="star${i}" style='transform-origin:0 0 ${tdistance}px;transform:translate3d(0,0,-${tdistance}px) rotateY(${(Math.random() * 360)}deg) rotateX(${(Math.random() * -50)}deg)' scale(${speed},${speed})> </div>;
};
}
生成定量的星星（900），并且每一颗星星的运动轨迹以随机数的形式赋值，Math.radom()生成随机数，
最终效果：