动态星空源码-适合个人博客网站（html+css+js）

TrustedMan

HTML:
  <div id="stars">   </div>
结构页面创建一个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()生成随机数，

可以在现有代码基础上对数量，颜色，轨迹等进行个性化调整

效果图

最终效果：![在这里插入图片描述]()

原始世界

谢谢分享

oushg79

感谢分享

leaqi

dddddd222

可以可以可以可以可以可以可以

please

感谢分享，支持开源！！！

JYYeah

感谢分享，支持开源！！！

薛城

感谢分享，支持开源！！！

qq73s5456

#在这里快速回复#动态星空, 前端动画