星空特效的HTML代碼示例
以下是一個星空特效的HTML代碼示例：
```html
<!DOCTYPE html>
<html>
<head>
<title>星空特效示例</title>
<style>
body {
background-color: #000;
}
.stars {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
.twinkle {
position: absolute;
width: 2px;
height: 2px;
background: #fff;
box-shadow: 1px 1px 2px #fff;
animation: twinkle 1s ease-in-out infinite;
}
@keyframes twinkle {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
</style>
</head>
<body>
<div class="stars">
<script>
for (var i = 0; i < 100; i++) {
var star = document.createElement('div');
star.className = 'twinkle';
star.style.left = Math.floor(Math.random() * 100) + '%';
star.style.top = Math.floor(Math.random() * 100) + '%';
document.body.appendChild(star);
}
</script>
</div>
</body>
</html>```
這個代碼會在頁面背景中生成100個閃爍的星星，使得整個頁面看起來像是夜空中的星空。可以在瀏覽器中運行查看效果。
以下是另外一個星空特效的HTML代碼示例：
Example:
```html
<!DOCTYPE html>
<html>
<head>
<title>星空特效示例</title>
<style>
body {
background-color: #000;
}
.stars {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.star {
position: absolute;
background-color: white;
width: 2px;
height: 2px;
border-radius: 50%;
-webkit-animation: twinkle 3s infinite;
animation: twinkle 3s infinite;
}
.star:nth-child(1) {
animation-delay: 1s;
}
.star:nth-child(2) {
animation-delay: 2s;
}
.star:nth-child(3) {
animation-delay: 3s;
}
.star:nth-child(4) {
animation-delay: 4s;
}
.star:nth-child(5) {
animation-delay: 5s;
}
@keyframes twinkle {
0% {
transform: scale(0.5);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.2;
}
100% {
transform: scale(0.5);
opacity: 1;
}
}
</style>
</head>
<body>
<div class="stars">
<script>
for (var i = 0; i < 100; i++) {
var star = document.createElement('div');
star.classList.add("star");
star.style.left = Math.floor(Math.random()*100) + "%";
star.style.top = Math.floor(Math.random()*100) + "%";
document.body.appendChild(star);
}
</script>
</div>
</body>
</html>```
這些代碼可以在瀏覽器中運行並產生相應的星空特效。
