文
Shiro Core
一个极简主义的个人网站设计系统。如纸的纯净，似雪的清新。
毛玻璃质感 · Spring 弹性动画 · CJK 字体优先 · 浅色/深色双主题 · 完整组件规范
核
🎨 色彩系统
浅色主题 (Light)
Primary
#33a6b8
Secondary
#a8d8b9
Base-100
#ffffff
Neutral
#c7c7cc
Info
#007aff
Success
#34c759
Warning
#ff9500
深色主题 (Dark)
Primary
#f596aa
Secondary
#fb966e
Base-100
#1c1c1e
Neutral
#c7c7cc
Info
#0a84ff
Success
#30d158
Warning
#ff9f0a
动态强调色池 (点击切换)
上排: 浅色模式色池 | 下排: 深色模式色池
Muted 灰度色阶
50
100
200
300
400
500
600
700
800
900
950
🔤 字体排版
Sans · 正文 / UI
Manrope
Aa Bb Cc Dd Ee Ff Gg
300 · 400 · 500 · 700
Serif · 文章正文
Noto Serif SC
中文排版 · 优雅衬线
400 · 600 · 700
Mono · 代码
JetBrains Mono
const x = 42;
Operator Mono · Fira Code
字号层级 (基准 14px)
标题 (28px / text-3xl) — Hero 区域大标题
二级标题 (22px / text-2xl) — 文章标题
正文 (15.4px / 1.1rem) — 文章内容 (Prose)
基准字号 (14px) — 默认正文 / UI 文字
辅助文字 (.text-sm) — 摘要、元信息
小字 (12px / .text-xs) — 标签、说明
🧩 组件展示
按钮
rounded-lg · bg-accent
rounded-full · glass
rounded-full
border-accent
disabled
文章卡片
CSS Spring 动画的实现与优化
📅 2024-05-20
📂 CSS
👁 1.8k 阅读
传统的 CSS ease 曲线难以模拟自然的弹簧物理效果，通过 cubic-bezier 进阶技巧可以逼近 Motion 库的 Spring 效果...
阅读更多 →
✦
引用块
"极简主义不是一无所有，而是恰到好处。每一个像素的存在都必须有其理由。"
— 设计哲学
毛玻璃层级
Thick
blur 20px · rgba(..., 0.97)
blur 20px · rgba(..., 0.97)
Default
blur 17.5px · rgba(..., 0.82)
blur 17.5px · rgba(..., 0.82)
Thin
blur 15px · rgba(..., 0.7)
blur 15px · rgba(..., 0.7)
Ultrathin
blur 15px · rgba(..., 0.44)
blur 15px · rgba(..., 0.44)
主题切换器（页面右上角）
☀ 浅色 · ◐ 跟随系统 · ☾ 深色 — 点击右上角切换器体验
📐 布局系统
页面整体结构
┌────────────────────────────────────────────────────────────┐
│ Header (fixed, h-4.5rem, z-50, backdrop-blur-md) │
│ ┌──────────────┬──────────────────────────┬────────────┐ │
│ │ Logo (左) │ Nav Pill (中) │ Actions(右)│ │
│ └──────────────┴──────────────────────────┴────────────┘ │
├────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Hero 区域 (两栏布局, max-w-[1800px]) │ │
│ │ ┌──────────────────┐ ┌──────────────────┐ │ │
│ │ │ 文字 (左 1/2) │ │ 头像 (右 1/2) │ │ │
│ │ │ max-w-2xl │ │ [200~300px] │ │ │
│ │ └──────────────────┘ └──────────────────┘ │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────┐ │
│ │ 文章列表 (max-w-3xl 居中) │ │
│ │ ┌──────────────────────────┐ │ │
│ │ │ 文章卡片 (py-8) │ │ │
│ │ └──────────────────────────┘ │ │
│ └──────────────────────────────────┘ │
├────────────────────────────────────────────────────────────┤
│ Footer (mt-32, py-6, border-t) │
│ ┌───────┬───────┬───────┬───────┐ │
│ │ Links │ Links │ Links │ © │ │
│ └───────┴───────┴───────┴───────┘ │
└────────────────────────────────────────────────────────────┘
┌──┐
FAB (fixed) ─► │↑ │
└──┘
关键尺寸速查
| 元素 | 值 | Tailwind Class |
|---|---|---|
| 基准字号 | 14px | — |
| Header 高度 | 72px | h-[4.5rem] |
| 文章最大宽度 | 768px | max-w-3xl |
| 大屏文章宽度 | 896px | 2xl:max-w-4xl |
| Hero 最大宽度 | 1280px | max-w-7xl |
| 内容最小高度 | 100vh - 280px | min-h-[calc(100vh-17.5rem)] |
| Hero 高度 | 100dvh / 800px | lg:h-dvh lg:min-h-[800px] |
| Footer 上边距 | 128px | mt-32 |
| 内容水平内边距 | 16px / 0 | px-4 md:px-0 |
✨ 动效系统
Spring 弹性预设 (Motion)
| 预设 | Stiffness | Damping | Duration | Bounce | 用途 |
|---|---|---|---|---|---|
| softBouncePreset | 100 | 10 | — | — | Hero 入场，通用过渡 |
| softSpringPreset | 120 | 20 | 0.35s | — | 从下往上过渡 |
| reboundPreset | 140 | 8 | — | 10 | 抽屉内容 |
| microDampingPreset | — | 24 | — | — | 微交互 |
| microReboundPreset | 300 | 20 | — | — | 快速微回弹 |
| smooth | — | — | 0.4s | 0 | 平滑无弹跳 |
| snappy | — | — | 0.4s | 0.15 | 敏捷小弹跳 |
| bouncy | — | — | 0.4s | 0.3 | 弹性弹跳 |
动效演示
↓
Soft Bounce
滚动指示箭头
✦
Ping Pulse
通知/状态指示
◉
Blob Float
页面背景装饰