首页html星空特效代码

html星空特效代码

时间: 2023-10-19 09:31:20 浏览: 179

以下是一个基于HTML和CSS的星空特效代码的示例： ```html <!DOCTYPE html> <html> <head> <title>星空特效</title> <style> body { background-color: #000; overflow: hidden; } .stars { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .star { position: absolute; border-radius: 50%; background-color: #fff; } </style> </head> <body> <div class="stars"></div> <script> function createStar() { const star = document.createElement('div'); star.className = 'star'; const size = Math.random() * 4; star.style.width = size + 'px'; star.style.height = size + 'px'; const { clientWidth, clientHeight } = document.documentElement; const x = Math.random() * clientWidth; const y = Math.random() * clientHeight; star.style.top = y + 'px'; star.style.left = x + 'px'; return star; } function createStars() { const stars = document.querySelector('.stars'); const numStars = 200; for (let i = 0; i < numStars; i++) { const star = createStar(); stars.appendChild(star); } } createStars(); </script> </body> </html> ``` 这段代码创建了一个具有星空特效的HTML页面。它使用CSS来定义整个页面的样式，包括背景颜色和星星的样式。通过JavaScript生成了一定数量的星星，并将它们添加到页面中的容器中。每个星星的位置和大小都是随机生成的，从而实现了星空特效。你可以将该代码复制到HTML文件中并在浏览器中打开以查看效果。

阅读全文