流体交互层:按压反馈 + 真半透明材质 + 主题交叉过渡 + 弹层材质化
按 apple-design(Designing Fluid Interfaces)审查落地: - 全站补 :active 按压缩放反馈(按钮/tab/链接/命令面板/前后栏导航),交互元素加 touch-action - TopBar、首页标题栏、浮动主题钮改 color-mix 半透明 + blur 真材质,配 reduced-transparency 回退 - 主题切换 250ms 交叉过渡(theme-anim 瞬时类),消除亮度突变 - CommandPalette/ShortcutsPanel 过 <Transition name="pop">:scrim 淡入 + 面板自顶部锚点 scale 进入,退出原路返回 - 首页标题栏收缩由二值跳变改为滚动进度 --sq 连续插值(16–56px) - reduced-motion 例外:弹层保留短交叉淡入,禁位移与主题过渡 - 触控目标增大(主题钮 40/44px、tab、后台导航项),文章大标题负字距 + 收紧行高
This commit is contained in:
@@ -29,11 +29,18 @@ import { site } from '../site'
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
padding: 10px 18px;
|
||||
background-color: var(--paper);
|
||||
backdrop-filter: blur(6px);
|
||||
background: color-mix(in srgb, var(--paper) 80%, transparent);
|
||||
backdrop-filter: blur(10px) saturate(160%);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-transparency: reduce) {
|
||||
.topbar {
|
||||
background: var(--paper);
|
||||
backdrop-filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
.brand {
|
||||
font-family: var(--serif);
|
||||
font-size: 17px;
|
||||
|
||||
Reference in New Issue
Block a user