以下是一个星空特效的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>
```
这些代码可以在浏览器中运行并产生相应的星空特效。
专题推荐: