【Html網頁模板】HTML炫酷星空（一閃一閃亮晶晶）

在這里插入圖片描述

文章目錄

- 專欄導讀
- 功能預覽
- 快速開始
- 核心實現拆解
- - 1. 背景與基礎布局
  - 2. 背景層靜態星空（輕微閃爍）
  - 3. 前景層“亮晶晶”的閃爍小星星
  - 4. 交互與動效
  - 5. 行星裝飾
- 可配置項與個性化建議
- 初始化順序（入口）
- 源碼
- 結語

專欄導讀

🔥🔥本文已收錄于《30天學習Python從入門到精通》

🉑🉑本專欄專門針對于零基礎和需要重新復習鞏固的同學所準備的一套基礎班教學，從0基礎到精通Python，輕松掌握Python，歡迎各位同學訂閱，專欄訂閱地址：點我直達

🤞🤞此外如果您已工作，如需利用Python解決辦公中常見的問題，歡迎訂閱《Python辦公自動化》專欄，訂閱地址：點我直達

本文基于項目文件，帶你快速拆解并實現一個具有星空背景、星星閃爍、鼠標視差與點擊漣漪特效的炫酷首頁。全文只有一個 HTML 文件，結構清晰、易于拓展。

功能預覽

星空背景與漂浮行星裝飾
兩層星空：
- 背景層靜態星星（輕微閃爍）
- 前景層“隨機小星星一閃一閃亮晶晶”（多色柔光小星星，節奏隨機）
鼠標移動產生輕微視差效果
點擊任意位置出現漣漪特效
響應式布局與現代 UI 風格按鈕

快速開始

1-炫酷星空首頁/
└── index.html

本地預覽（任選其一）：

直接雙擊打開 index.html
或在該目錄啟動本地服務器并訪問 http://localhost:8000/

核心實現拆解

1. 背景與基礎布局

使用漸變背景營造深邃的宇宙氛圍：

body {height: 100vh;background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 50%, #16213e 100%);overflow: hidden;font-family: 'Arial', sans-serif;
}

兩層主要容器：
- .starfield：底層靜態星星
- .shooting-stars：前景閃爍小星星（已無流星動畫，僅承載“亮晶晶”）

2. 背景層靜態星空（輕微閃爍）

CSS：

.star { position: absolute; background: white; border-radius: 50%; animation: twinkle 2s infinite alternate; }
@keyframes twinkle { 0% {opacity: .3; transform: scale(1);} 100% {opacity: 1; transform: scale(1.2);} }

JS 生成：

function createStars(){const starfield = document.getElementById('starfield');const numStars = 200;for(let i=0;i<numStars;i++){const star = document.createElement('div');star.className='star';const size = Math.random()*3+1;star.style.cssText = `width:${size}px;height:${size}px;left:${Math.random()*100}%;top:${Math.random()*100}%;`;star.style.animationDelay = Math.random()*2+'s';star.style.animationDuration = (Math.random()*3+2)+'s';starfield.appendChild(star);}
}

3. 前景層“亮晶晶”的閃爍小星星

多色小星星樣式（藍/白/黃/粉，帶柔和光暈）：

.twinkling-star{position:absolute;border-radius:50%;animation:sparkle ease-in-out infinite;background: radial-gradient(circle,#fff 0%,#87ceeb 60%,transparent 100%);} /* 默認藍調 */
.twinkling-star.color-blue{box-shadow:0 0 10px #87ceeb,0 0 20px rgba(135,206,235,.5);} 
.twinkling-star.color-white{background:radial-gradient(circle,#fff 0%,#f0f8ff 60%,transparent 100%);box-shadow:0 0 8px #fff,0 0 16px rgba(255,255,255,.4);} 
.twinkling-star.color-yellow{background:radial-gradient(circle,#fff 0%,#ffd700 60%,transparent 100%);box-shadow:0 0 8px #ffd700,0 0 16px rgba(255,215,0,.4);} 
.twinkling-star.color-pink{background:radial-gradient(circle,#fff 0%,#ff69b4 60%,transparent 100%);box-shadow:0 0 8px #ff69b4,0 0 16px rgba(255,105,180,.4);} 
@keyframes sparkle{0%,100%{opacity:.3;transform:scale(.8);filter:brightness(1);}25%{opacity:.8;transform:scale(1.2);filter:brightness(1.5);}50%{opacity:1;transform:scale(1.4);filter:brightness(2);}75%{opacity:.6;transform:scale(1.1);filter:brightness(1.2);} }

生成與節奏微調：

function createTwinklingStars(){const container = document.getElementById('shooting-stars');const count = 80; // 調整數量const colors = ['color-blue','color-white','color-yellow','color-pink'];for(let i=0;i<count;i++){const s = document.createElement('div');s.className = 'twinkling-star ' + colors[Math.floor(Math.random()*colors.length)];const size = Math.random()*2+1; // 1-3pxs.style.cssText = `width:${size}px;height:${size}px;left:${Math.random()*100}%;top:${Math.random()*100}%`;s.style.animationDuration = (Math.random()*2+1.5)+'s';s.style.animationDelay = (Math.random()*3)+'s';container.appendChild(s);}
}
function updateTwinklingRhythm(){document.querySelectorAll('.twinkling-star').forEach(s=>{const size = Math.max(1, Math.min(3, (parseFloat(s.style.width)|| (Math.random()*2+1)) + (Math.random()*0.6-0.3)));s.style.width=size+'px'; s.style.height=size+'px';s.style.animationDuration=(Math.random()*2+1.2)+'s';s.style.animationDelay=(Math.random()*2)+'s';});setTimeout(updateTwinklingRhythm, 3000 + Math.random()*2000);
}

效果：多色小星遍布全屏，大小/節奏輕微起伏，呈現“亮晶晶”的律動感。

4. 交互與動效

鼠標視差：

document.addEventListener('mousemove', e=>{const stars = document.querySelectorAll('.star');const mx=e.clientX/window.innerWidth, my=e.clientY/window.innerHeight;stars.forEach((st,i)=>{const speed=(i%5+1)*0.5; st.style.transform=`translate(${(mx-.5)*speed}px, ${(my-.5)*speed}px)`;});
});

點擊漣漪：

document.addEventListener('click', e=>{const ripple=document.createElement('div');ripple.style.cssText = `position:absolute;left:${e.clientX}px;top:${e.clientY}px;width:0;height:0;border:2px solid rgba(135,206,235,.6);border-radius:50%;transform:translate(-50%,-50%);animation:ripple 1s ease-out;pointer-events:none;z-index:100;`;document.body.appendChild(ripple); setTimeout(()=>document.body.removeChild(ripple),1000);
});
/* 補充關鍵幀 */
@keyframes ripple{0%{width:0;height:0;opacity:1;}100%{width:100px;height:100px;opacity:0;}}

5. 行星裝飾

通過兩個絕對定位的圓形漸變塊制造“遠處行星”的氛圍，并加輕微浮動動畫：

.planet{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,#4a90e2,#2c5aa0);box-shadow:0 0 50px rgba(74,144,226,.3);animation:float 6s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}

可配置項與個性化建議

星星數量：createTwinklingStars 中的 count（默認 80）
星星大小：生成時的 size 以及 sparkle 動畫中的 scale 值
閃爍節奏：animationDuration 與 animationDelay 的隨機范圍
顏色風格：colors 數組可自由增刪（如全藍、冷白、金黃等）
移動端優化：
- 適當降低星星數量與發光強度
- 避免同時疊加過多陰影層

小提示：當前文件中保留了一個針對 .meteor 的 will-change 性能提示樣式（來源于早期“流星”版本），僅作為示例存在，不影響當前效果。如需更嚴謹可改成對 .twinkling-star 使用 will-change。

初始化順序（入口）

createStars();          // 背景層：靜態星空（微微閃爍）
createTwinklingStars(); // 前景層：多色小星（亮晶晶）
updateTwinklingRhythm();// 周期性細微調整，增強靈動感

源碼

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>炫酷星空首頁</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {height: 100vh;background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 50%, #16213e 100%);overflow: hidden;font-family: 'Arial', sans-serif;}.starfield {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;}.star {position: absolute;background: white;border-radius: 50%;animation: twinkle 2s infinite alternate;}@keyframes twinkle {0% { opacity: 0.3; transform: scale(1); }100% { opacity: 1; transform: scale(1.2); }}.twinkling-star {position: absolute;background: radial-gradient(circle, #ffffff 0%, #87ceeb 60%, transparent 100%);border-radius: 50%;animation: sparkle ease-in-out infinite;}.twinkling-star.color-blue {background: radial-gradient(circle, #ffffff 0%, #87ceeb 60%, transparent 100%);box-shadow: 0 0 10px #87ceeb, 0 0 20px rgba(135, 206, 235, 0.5);}.twinkling-star.color-white {background: radial-gradient(circle, #ffffff 0%, #f0f8ff 60%, transparent 100%);box-shadow: 0 0 8px #ffffff, 0 0 16px rgba(255, 255, 255, 0.4);}.twinkling-star.color-yellow {background: radial-gradient(circle, #ffffff 0%, #ffd700 60%, transparent 100%);box-shadow: 0 0 8px #ffd700, 0 0 16px rgba(255, 215, 0, 0.4);}.twinkling-star.color-pink {background: radial-gradient(circle, #ffffff 0%, #ff69b4 60%, transparent 100%);box-shadow: 0 0 8px #ff69b4, 0 0 16px rgba(255, 105, 180, 0.4);}@keyframes sparkle {0%, 100% { opacity: 0.3; transform: scale(0.8); filter: brightness(1);}25% {opacity: 0.8;transform: scale(1.2);filter: brightness(1.5);}50% {opacity: 1;transform: scale(1.4);filter: brightness(2);}75% {opacity: 0.6;transform: scale(1.1);filter: brightness(1.2);}}.content {position: relative;z-index: 10;display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100vh;text-align: center;color: white;}.title {font-size: 4rem;font-weight: bold;margin-bottom: 1rem;text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);animation: glow 2s ease-in-out infinite alternate;}@keyframes glow {from { text-shadow: 0 0 20px rgba(255, 255, 255, 0.5); }to { text-shadow: 0 0 30px rgba(135, 206, 235, 0.8), 0 0 40px rgba(135, 206, 235, 0.6); }}.subtitle {font-size: 1.5rem;margin-bottom: 2rem;opacity: 0.8;animation: fadeInUp 1s ease-out 0.5s both;}@keyframes fadeInUp {from {opacity: 0;transform: translateY(30px);}to {opacity: 0.8;transform: translateY(0);}}.nav-buttons {display: flex;gap: 2rem;animation: fadeInUp 1s ease-out 1s both;}.nav-btn {padding: 12px 30px;background: rgba(255, 255, 255, 0.1);border: 2px solid rgba(255, 255, 255, 0.3);color: white;text-decoration: none;border-radius: 30px;transition: all 0.3s ease;backdrop-filter: blur(10px);}.nav-btn:hover {background: rgba(135, 206, 235, 0.2);border-color: rgba(135, 206, 235, 0.6);box-shadow: 0 0 20px rgba(135, 206, 235, 0.4);transform: translateY(-2px);}.shooting-stars {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 5;}.planet {position: absolute;border-radius: 50%;background: radial-gradient(circle at 30% 30%, #4a90e2, #2c5aa0);box-shadow: 0 0 50px rgba(74, 144, 226, 0.3);animation: float 6s ease-in-out infinite;}@keyframes float {0%, 100% { transform: translateY(0px); }50% { transform: translateY(-20px); }}</style>
</head>
<body><div class="starfield" id="starfield"></div><div class="shooting-stars" id="shooting-stars" aria-hidden="true"></div><div class="planet" style="width: 80px; height: 80px; top: 20%; right: 15%; animation-delay: -2s;"></div><div class="planet" style="width: 60px; height: 60px; bottom: 30%; left: 10%; animation-delay: -4s; background: radial-gradient(circle at 30% 30%, #e74c3c, #c0392b);"></div><div class="content"><h1 class="title">星空之旅</h1><p class="subtitle">探索無限宇宙的奧秘</p><div class="nav-buttons"><a href="#" class="nav-btn">開始探索</a><a href="#" class="nav-btn">關于我們</a><a href="#" class="nav-btn">聯系方式</a></div></div><script>// 創建星星function createStars() {const starfield = document.getElementById('starfield');const numStars = 200;for (let i = 0; i < numStars; i++) {const star = document.createElement('div');star.className = 'star';const size = Math.random() * 3 + 1;star.style.width = size + 'px';star.style.height = size + 'px';star.style.left = Math.random() * 100 + '%';star.style.top = Math.random() * 100 + '%';star.style.animationDelay = Math.random() * 2 + 's';star.style.animationDuration = (Math.random() * 3 + 2) + 's';starfield.appendChild(star);}}// 創建隨機閃爍小星星function createTwinklingStars() {const container = document.getElementById('shooting-stars');const count = 80; // 可按需調整數量const colors = ['color-blue', 'color-white', 'color-yellow', 'color-pink'];for (let i = 0; i < count; i++) {const star = document.createElement('div');star.className = 'twinkling-star ' + colors[Math.floor(Math.random() * colors.length)];const size = Math.random() * 2 + 1; // 1 - 3pxstar.style.width = size + 'px';star.style.height = size + 'px';star.style.left = Math.random() * 100 + '%';star.style.top = Math.random() * 100 + '%';// 每顆星星不同節奏star.style.animationDuration = (Math.random() * 2 + 1.5) + 's'; // 1.5 - 3.5sstar.style.animationDelay = (Math.random() * 3) + 's';container.appendChild(star);}}// 周期性輕微隨機改變閃爍星星的節奏和大小，增強“亮晶晶”效果function updateTwinklingRhythm() {const stars = document.querySelectorAll('.twinkling-star');stars.forEach((star) => {// 輕微調整大小和時長const size = Math.max(1, Math.min(3, (parseFloat(star.style.width) || (Math.random()*2+1)) + (Math.random()*0.6 - 0.3)));star.style.width = size + 'px';star.style.height = size + 'px';star.style.animationDuration = (Math.random() * 2 + 1.2) + 's';star.style.animationDelay = (Math.random() * 2) + 's';});setTimeout(updateTwinklingRhythm, 3000 + Math.random() * 2000);}// 鼠標移動效果document.addEventListener('mousemove', (e) => {const stars = document.querySelectorAll('.star');const mouseX = e.clientX / window.innerWidth;const mouseY = e.clientY / window.innerHeight;stars.forEach((star, index) => {const speed = (index % 5 + 1) * 0.5;const x = (mouseX - 0.5) * speed;const y = (mouseY - 0.5) * speed;star.style.transform = `translate(${x}px, ${y}px)`;});});// 初始化// 初始化createStars();
+        createTwinklingStars();
+        updateTwinklingRhythm();// 添加少量持續拖尾粒子效果const trailStyle = document.createElement('style');trailStyle.textContent = `.meteor {will-change: transform, opacity, filter;}.meteor::before, .meteor::after {will-change: transform, opacity;}`;document.head.appendChild(trailStyle);// 添加點擊特效document.addEventListener('click', (e) => {const ripple = document.createElement('div');ripple.style.position = 'absolute';ripple.style.left = e.clientX + 'px';ripple.style.top = e.clientY + 'px';ripple.style.width = '0px';ripple.style.height = '0px';ripple.style.border = '2px solid rgba(135, 206, 235, 0.6)';ripple.style.borderRadius = '50%';ripple.style.transform = 'translate(-50%, -50%)';ripple.style.animation = 'ripple 1s ease-out';ripple.style.pointerEvents = 'none';ripple.style.zIndex = '100';document.body.appendChild(ripple);setTimeout(() => {document.body.removeChild(ripple);}, 1000);});// 添加漣漪動畫const style = document.createElement('style');style.textContent = `@keyframes ripple {0% {width: 0px;height: 0px;opacity: 1;}100% {width: 100px;height: 100px;opacity: 0;}}`;document.head.appendChild(style);</script>
</body>
</html>

結語

至此，一個炫酷、靈動且可擴展的“星空首頁”就完成了。你可以繼續添加導航、介紹區塊、滾動內容，或更換主題色與動效參數，打造你的專屬宇宙。歡迎在的基礎上自由改造與二次創作！
希望對初學者有幫助
致力于辦公自動化的小小程序員一枚
希望能得到大家的【一個免費關注】！感謝
求個 🤞 關注 🤞
此外還有辦公自動化專欄，歡迎大家訂閱：Python辦公自動化專欄
求個 ?? 喜歡 ??
此外還有爬蟲專欄，歡迎大家訂閱：Python爬蟲基礎專欄
求個 👍 收藏 👍
此外還有Python基礎專欄，歡迎大家訂閱：Python基礎學習專欄