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

最新推荐文章于 2025-03-27 11:24:34 发布

Henrybalabl

最新推荐文章于 2025-03-27 11:24:34 发布

阅读量1.7k

点赞数 3

分类专栏：知识点复盘

本文链接：https://blog.youkuaiyun.com/Henrybalabl/article/details/111317546

版权

知识点复盘专栏收录该内容

8 篇文章

订阅专栏

该博客介绍了使用HTML、CSS和JavaScript实现星空动画效果的方法。通过HTML定义星星样式，CSS设置夜空渐变背景、调节星空位置并开启3D维度，用动画定义星星移动。JS生成900颗星星，为每颗星星的运动轨迹赋予随机数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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()生成随机数，
最终效果：在这里插入图片描述