日 / 夜主题切换按钮（Day/Night Toggle）

一组纯 HTML / CSS / JS 实现的「白天 / 黑夜」主题切换按钮，共 4 种风格。无需任何依赖，浏览器打开即可使用。

文件说明

文件	月亮表现	特点	在线预览
按钮-全月.html	CSS 圆形满月	月亮用径向渐变绘制，简洁干净	预览
按钮-弯月.html	弯月 🌙	月亮使用弯月 emoji，可爱风格	预览
按钮-左右移动.html	月相动画（左右移动）	遮挡球左右移动模拟月相变化	预览
按钮-折弯移动.html	月相动画（折线路径）	遮挡球沿折线路径循环，月相更丰富	预览

功能特性

• 点击按钮在「白天 / 黑夜」主题间切换，页面背景与按钮同步变化
• 太阳发光、云朵、星星闪烁等细腻动画
• 鼠标悬停：按钮放大并扩散光晕；鼠标按下：轻微收缩，体现按压感
• 状态文字实时显示当前模式（白天 / 黑夜）
• 纯原生实现，无外部库、无网络依赖

在线预览

已通过 GitHub Pages 部署，点击上方表格中的「预览」链接即可在浏览器中直接体验，也可以访问主页：

本地预览：直接用浏览器打开任意一个 HTML 文件即可，无需部署。

自定义

• 按钮-左右移动.html 与 按钮-折弯移动.html 支持通过 CSS 变量 --ts 整体缩放按钮尺寸（当前为 1，即 200 × 90 px）
• 滑块移动速度等动画时长，可在对应文件的 .knob transition 中调整

---