HTML星空特效

当前位置：电视猫 > HTML/Xhtml>

电视猫时间： 2024-08-18 14:42:36

　　HTML星空特效

HTML星空特效制作指南

一、HTML结构

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>星空特效</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="star-container"></div>
  <script src="script.js"></script>
</body>
</html>

star-container: 这个div元素将作为星空的容器。

二、CSS样式（style.css）

CSS

body {
  margin: 0;
  overflow: hidden;
  background: #000;
}

.star-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

将页面背景设置为黑色，隐藏滚动条。
将 star-container 设置为固定定位，占据整个屏幕。
pointer-events: none 防止星星元素阻挡页面交互。

三、JavaScript代码（script.js）

JavaScript

const starContainer = document.querySelector('.star-container');

function createStar() {
  const star = document.createElement('div');
  star.class   List.add('star');
  star.style.top = Math.random() * 100 + '%';
  star.style.left = Math.random() * 100 + '%';
  star.style.width = Math.random() * 3 + 'px';
  star.style.height =    Math.random() * 3 + 'px';
  star.style.opacity = Math.random();
  star.style.animationDuration = Math.random() * 3 + 's';
  starContainer.appendChild(star);
}

// 创建多个星星
for (let i = 0; i < 200; i++) {
  createStar();
}

// 添加动画
const stars = document.querySelectorAll('.star');
stars.forEach(star => {
  star.style.animationName = 'twinkle';
  star.style.animationIterationCount = 'infinite';
});

@keyframes twinkle {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.2;
  }
}