![javascript.gif]( "javascript.gif")
源码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML+CSS+JS 夜空星星闪烁效果</title>
<style>
body, html {
height: 100%;
margin: 0;
overflow: hidden;
font-family: Arial, sans-serif;
background: #000033;
}
.content {
position: relative;
z-index: 1;
color: white;
text-align: center;
padding-top: 20vh;
}
.star {
position: absolute;
background: white;
border-radius: 50%;
animation: twinkle 5s infinite ease-in-out alternate;
}
@keyframes twinkle {
0% { opacity: 0.2; }
100% { opacity: 1; }
}
</style>
</head>
<body>
<div class="content">
<h1>Starry Night</h1>
<p>Gaze at the twinkling stars!</p>
</div>
<script>
function createStar() {
const star = document.createElement('div');
star.classList.add('star');
star.style.width = `${Math.random() * 3 + 1}px`;
star.style.height = star.style.width;
star.style.left = `${Math.random() * 100}%`;
star.style.top = `${Math.random() * 100}%`;
star.style.animationDuration = `${Math.random() * 3 + 2}s`;
document.body.appendChild(star);
}
for (let i = 0; i < 200; i++) {
createStar();
}
</script>
</body>
</html>
