纯前端实现星空背景效果：代码解析与展示

代码拆分于个人官网

🌟 实现特点

• 双重视觉效果：Canvas 星空动画 + 动态背景渐变
• 主题自适应：亮色 / 暗色模式自动切换
• 响应式设计：适配各种屏幕尺寸
• 性能优化：仅在暗色模式下渲染星空动画

🛠️ 技术实现

HTML 结构：

• Canvas 元素绘制星空
• 固定定位的 div 实现背景渐变
• 居中的内容区域展示主题

CSS 技巧：

• Tailwind CSS 实现主题切换
• 多重径向渐变创造深度感
• CSS 动画实现背景漂浮效果
• prefers-reduced-motion 尊重用户偏好

JavaScript 功能：

• Canvas 星空动画（普通星星、大星星、彗星）
• 主题切换与状态保存
• 窗口大小自适应调整

💡 代码亮点

• 条件渲染：星空仅在暗色模式下渲染，节省资源
• 平滑过渡：主题切换时星空淡入淡出
• 视觉深度：多重背景渐变创造层次感
• 性能优化：requestAnimationFrame 确保流畅动画

Test

Test

这段代码巧妙结合了 Canvas 动画和 CSS 渐变，创造出令人印象深刻的星空效果，同时保持了良好的性能和用户体验。