精易论坛

标题: 动态星空源码-适合个人博客网站（html+css+js） [打印本页]

作者: TrustedMan 时间: 2025-3-4 17:32
标题: 动态星空源码-适合个人博客网站（html+css+js）
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()生成随机数，

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

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

)

作者: qq73s5456 时间: 2025-3-4 20:55
#在这里快速回复#动态星空, 前端动画

作者: 薛城 时间: 2025-3-4 22:59
感谢分享，支持开源！！！

作者: JYYeah 时间: 2025-3-5 00:08
感谢分享，支持开源！！！

作者: please 时间: 2025-3-5 09:36
感谢分享，支持开源！！！

作者: dddddd222 时间: 2025-3-5 14:12
可以可以可以可以可以可以可以

作者: leaqi 时间: 2025-3-7 01:26

作者: oushg79 时间: 2025-3-7 08:37
感谢分享

作者: 原始世界 时间: 2025-3-7 16:39
谢谢分享

欢迎光临精易论坛 (https://125.confly.eu.org/)