纯 CSS 实现水彩渐变胶囊开关物理下沉与柔和变色在手账设置界面或白噪音音效开关中一个随处可见但极其影响手感的小控件是“胶囊拨动开关Toggle Switch”。普通的 iOS 风格开关存在两个审美硬伤开启时是高饱和度、刺眼的科技绿#34C759。滑块的移动是纯线性的死板滑动缺乏真实物理开关被手指按下、下沉、弹起并卡入卡槽Snap-in Haptic的机械质感。在「Tide UI」中我们用纯 CSS 伪元素、弹簧贝塞尔曲线与水彩暖色渐变纯代码实现了一个带有手作质感的胶囊开关组件。-------------------------------------------------------------------- | 纯 CSS 水彩胶囊开关三阶段物理手感 | -------------------------------------------------------------------- | 胶囊轨道底盘 (.toggle-track): | | ├── 关闭态: #EAE3D2 (微黄未漂白宣纸纸浆底色) | | └── 开启态: 渐变过渡至 #88AA99 (鼠尾草绿) 内阴影凹陷感 | | | | 核心圆形滑块 (::after 伪元素): | | ├── 物理按压态 (:active): 宽度被水平压缩拉伸 (从 20px 变成 24px) | | ├── 弹簧滑行: transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1)| | └── 材质质感: #FAF7F0 1.5px 焦炭黑描边 底部 1px 物理微阴影 | --------------------------------------------------------------------1. 核心纯 CSS 胶囊开关实现/* 隐藏原生复选框使用自定义 Label 承载全套交互 */ .watercolor-toggle { position: relative; display: inline-block; width: 48px; height: 26px; user-select: none; cursor: pointer; } .watercolor-toggle input { opacity: 0; width: 0; height: 0; } /* 胶囊轨道 */ .watercolor-toggle-slider { position: absolute; inset: 0; background-color: #EAE3D2; border: 2px solid #2D2B2A; border-radius: 26px; transition: background-color 0.25s ease, box-shadow 0.25s ease; box-shadow: inset 1px 1px 3px rgba(45, 43, 42, 0.15); } /* 圆形滑块 (手绘物理小纽扣) */ .watercolor-toggle-slider::after { content: ; position: absolute; height: 18px; width: 18px; left: 2px; bottom: 2px; background-color: #FAF7F0; border: 1.5px solid #2D2B2A; border-radius: 50%; box-shadow: 1px 2px 0px #2D2B2A; transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.15s ease; } /* 激活状态轨道变为温润鼠尾草绿滑块向右弹跳 */ .watercolor-toggle input:checked .watercolor-toggle-slider { background-color: #88AA99; } .watercolor-toggle input:checked .watercolor-toggle-slider::after { transform: translateX(22px); background-color: #FAF7F0; } /* 按下时滑块产生微小的弹性拉伸 (Squash) */ .watercolor-toggle:active .watercolor-toggle-slider::after { width: 22px; }2. 在 React 中的封装与无障碍支持import React from react; export const CozyToggle: React.FC{ checked: boolean; onChange: (val: boolean) void; label?: string; } ({ checked, onChange, label }) { return ( label classNameflex items-center gap-3 cursor-pointer div classNamewatercolor-toggle input typecheckbox checked{checked} onChange{(e) onChange(e.target.checked)} aria-label{label || 开关切换} / span classNamewatercolor-toggle-slider / /div {label span classNametext-xs font-bold text-[#2D2B2A]{label}/span} /label ); };物理世界的按压回弹手指按下小滑块微微变宽受压手指松开滑块带着活泼的弹簧振子清脆卡入右侧。把每一个基础控件赋予生命的弹性软件才能真正拥有让人愉悦的互动乐趣。
