CSSToggle无 JS
一只狐狸
纯 CSS 日夜切换 · 会害羞的狐狸
在下方演示区域内直接操作（鼠标 / 键盘 / 滚动）。
全屏打开演示简介
圆形视窗里住着一只狐狸：拨动开关，背景从白昼变黑夜，狐狸毛色与表情随之变化，悬停时还会眯眼。全程 checkbox + CSS 兄弟选择器。
收录日期 2026-01-27 · 来源 前端嘛 · Code Fun
技术栈
HTMLCSS:checked
解析
无 JS 的状态机
隐藏 checkbox 作为状态源，:checked 配合 ~ 选择器切换 .c-window 背景、太阳/月亮显示与狐狸配色。
微交互
:hover 改变眼睛高度与 bottom 位移，用 transition 做出「探头」感，适合主题切换组件灵感。
应用场景
- ▸站点深色模式开关装饰
- ▸儿童向 / 可爱风 landing
- ▸CSS 选择器教学案例
完整源码
← 更多效果加载源码中…
请稍候…