- 大屏显示时间,数字大小至少220px,用户可调节
- 单个数字滚动动画(每位数字独立滚动,高级自然)
- 全屏支持,全屏后隐藏除时钟外的所有内容
- 自定义字体、字体颜色、背景颜色
- 隐藏秒功能(秒固定00,时分仍刷新动画)
- 显示日期(年月日,字体颜色一致,大小为时钟的1/3,同步调整)
- 设置自动保存至本地
- 时间校准功能(变快/变慢,精度0.1s-60s,显示校准前后时间)
设计运动: 工业朋克 + 机械仪表盘美学
核心原则:
- 深邃的暗色调营造沉浸式体验
- 精密的机械感通过微妙的纹理和边框传达
- 高对比度确保极致可读性
- 克制的装饰,让数字本身成为绝对主角
色彩哲学: 以纯黑 (#0a0a0a) 为底色,数字默认使用冷白 (#e8e8e8),控制面板使用深灰层次 (#1a1a1a, #252525)。色彩的克制是为了让时间数字成为唯一的视觉焦点。
布局范式: 完全居中的单焦点布局。时钟占据视口的绝对中心,控制面板以底部抽屉形式出现,不干扰主视觉。全屏模式下一切消失,只留纯粹的数字。
标志性元素:
- 数字底部微妙的发光效果(text-shadow),如同LED屏幕
- 冒号以缓慢的呼吸动画闪烁
- 控制面板使用毛玻璃效果
交互哲学: 极简交互,hover时控制元素才显现。鼠标静止3秒后控制条自动隐藏。
动画: 数字滚动使用3D翻转效果(类似机械翻页钟),每个数字独立翻转,带有轻微的弹性回弹。
字体系统: 主字体使用等宽的 JetBrains Mono 或 Roboto Mono,确保数字宽度一致,避免布局抖动。
0.07设计运动: 瑞士极简主义 + 日式侍寂美学
核心原则:
- 大量留白创造呼吸感
- 极细的线条和微妙的灰度层次
- 动画如呼吸般自然、缓慢
- 去除一切非必要装饰
色彩哲学: 以温暖的米白 (#fafaf8) 为底,数字使用深炭灰 (#1a1a1a)。整个界面只使用灰度色阶,通过明度差异创造层次。纯净的色彩让时间本身成为冥想的对象。
布局范式: 黄金分割布局,时钟略偏上方。日期以极小的字号出现在时钟下方。控制面板从右侧滑出,使用半透明白色背景。
标志性元素:
- 数字之间使用极细的分隔线而非冒号
- 页面四角有微妙的装饰性细线
- 控制面板使用纸张质感的白色
交互哲学: 所有交互都带有延迟感,如同水墨在宣纸上缓慢晕染。
动画: 数字滚动使用垂直滑动 + 淡入淡出,旧数字向上滑出并渐隐,新数字从下方滑入并渐显,过渡极其平滑。
字体系统: 使用 DM Sans 作为数字字体,纤细而现代。控制面板使用 Noto Sans SC。
0.05设计运动: 赛博朋克 + 霓虹灯管美学
核心原则:
- 深色背景上的霓虹发光效果
- 数字如同真实的霓虹灯管,带有光晕和闪烁
- 科技感的网格背景纹理
- 高饱和度的强调色
色彩哲学: 深蓝黑底色 (#0d0d1a),数字默认使用电光蓝 (#00d4ff),带有多层发光效果。控制面板使用半透明深色 + 霓虹边框。
布局范式: 数字占据屏幕中央,背景有微妙的网格线条。控制面板以浮动面板形式出现在底部。
标志性元素:
- 数字的多层霓虹发光(内发光 + 外发光 + 环境光)
- 背景的动态网格线条
- 冒号的霓虹闪烁效果
交互哲学: 交互带有电子感的即时反馈,hover时元素发光增强。
动画: 数字滚动使用垂直滚轮效果,数字像老虎机一样快速滚动后减速停止,带有轻微的过冲和回弹。
字体系统: 使用 Orbitron 或 Share Tech Mono 等科技感字体。
0.04选择理由:暗黑背景最适合大屏时钟的使用场景(卧室、办公桌、展示屏),深色背景减少光污染,高对比度确保远距离可读性。机械翻页的滚动动画最具辨识度和高级感。同时,暗色主题也是用户最常期望的时钟应用风格。
- 主背景: #0a0a0a(近纯黑)
- 数字颜色: #e0e0e0(冷白,默认)
- 控制面板背景: rgba(26, 26, 26, 0.95) 毛玻璃
- 强调色: #3b82f6(蓝色,用于按钮和开关)
- 字体:
- 时钟数字: JetBrains Mono / Roboto Mono(等宽)
- 界面: system-ui
- 可选字体列表: JetBrains Mono, Roboto Mono, Fira Code, Source Code Pro, IBM Plex Mono, Courier Prime, Orbitron, Share Tech Mono, Digital-7 style
- 动画: 单数字垂直滚动 + 弹性缓动,过渡时长 600ms
- 冒号: 呼吸闪烁动画,1s周期