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;

  }

}