满屏炫酷星空代码html
下面是一个使用HTML、CSS、JavaScript和meta标签实现满屏炫酷星空效果的代码示例，电脑版和手机版都做成自适应代码。
html部份：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 自适应屏幕大小 --> <title>炫酷星空</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="container"> <div class="stars"></div> </div> <script src="script.js"></script> </body> </html>
css部份：
/* styles.css */
body {
margin: 0;
overflow: hidden;
height: 100vh;
background: #000; /* 黑色背景 */
}
.container {
position: relative; /* 容器的定位上下文，用于绝对定位的星星元素 */
width: 100%;
height: 100%;
}
.stars {
position: absolute; /* 星星元素相对于容器绝对定位 */
top: 50%; /* 将星星元素垂直居中 */
left: 50%; /* 将星星元素水平居中 */
transform: translate(-50%, -50%); /* 通过 transform 属性将星星元素精确居中 */
width: 100%;
height: 100%;
}js部份：
// script.js
window.onload = function() {
const numStars = 200; // 星星的数量
const stars = []; // 存储星星坐标的数组
const container = document.querySelector('.container'); // 获取容器元素
const starsDiv = document.querySelector('.stars'); // 获取用于显示星星的<div>元素
// 随机生成星星的坐标
for (let i = 0; i < numStars; i++) {
const x = Math.random() * window.innerWidth; // 随机生成星星的x坐标
const y = Math.random() * window.innerHeight; // 随机生成星星的y坐标
stars.push({ x, y }); // 将星星的坐标存入数组
}
// 创建星星元素并添加到页面中
stars.forEach(function(star) {
const starElement = document.createElement('img'); // 创建<img>元素代表星星
starElement.src = 'star.png'; // 设置星星图片的路径，这里假设有一张名为"star.png"的图片作为星星图像
starElement.style.left = `${star.x}px`; // 设置星星元素的左边距，使其水平和垂直居中
starElement.style.top = `${star.y}px`; // 设置星星元素的顶部边距，使其水平和垂直居中
starsDiv.appendChild(starElement); // 将星星元素添加到显示星星的<div>元素中
});
};<a href="https://dm.qunapu.com/daima/xingxing/index.html">点击这里查看效果</a>
代码解释：
以下是对代码的一些解释和改进建议：
HTML 结构：HTML 结构很简洁，但是你可以考虑增加一些描述性的 class 或 id，比如给 .container 和 .stars 更具体的名字，这样可以更好地组织你的 CSS 和 JavaScript 代码。
CSS 样式：CSS 代码已经能够实现页面的黑色背景和星星的居中显示，但为了更好的用户体验，你可能需要考虑一些其他因素，比如页面的响应式设计，或者调整星星的显示效果（例如大小、颜色等）。
JavaScript 逻辑：JavaScript 代码可以随机生成星星的坐标，并且将星星的图片放置在正确的位置。但是，你可能需要处理图片的加载问题，以确保当图片加载完成后再将其添加到页面中。此外，你还可以考虑增加一些动画效果，比如星星的闪烁或者移动。
文件路径：在 starElement.src = 'star.png' 这行代码中，路径可能需要根据实际的文件结构进行调整。确保路径正确指向你的星星图片。
这是一个基本的分析，你可能需要根据你的具体需求进行调整。希望这对你有所帮助！
效果截图如下：
