新闻详情

新闻详情

首页 / 资讯中心 / 详情

纯 CSS 实现水彩渐变胶囊开关:物理下沉与柔和变色

发布时间:2026/9/27 8:35:04来源:尧图网络
纯 CSS 实现水彩渐变胶囊开关:物理下沉与柔和变色
纯 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 ); };物理世界的按压回弹手指按下小滑块微微变宽受压手指松开滑块带着活泼的弹簧振子清脆卡入右侧。把每一个基础控件赋予生命的弹性软件才能真正拥有让人愉悦的互动乐趣。
网站建设高端定制企业官网
RELATED

相关资讯

更多精彩内容,欢迎继续阅读

较早相关资讯

最新相关资讯

一文搞懂网站推广优帮云:备案不再一头雾水的实战指南 2026/9/27 9:35:22

一文搞懂网站推广优帮云:备案不再一头雾水的实战指南

一文搞懂网站推广优帮云:备案不再一头雾水的实战指南 备案流程一头雾水?别急,今天咱们就掰开揉碎了, 一文搞懂 【网站推广优帮云】在域名与服务器运维中的真实角色。很多设计师转前端的朋友,刚接触独立站或企业官网时,最头疼的不是写代码,而是那个看…

阅读更多 →
Longhorn BackingImage 增强:副本高可用、节点/磁盘选择器与驱逐处理全指南 2026/9/27 9:35:15

Longhorn BackingImage 增强:副本高可用、节点/磁盘选择器与驱逐处理全指南

云原生存储高可用容器编排 【免费下载链接】longhorn Cloud-Native distributed storage built on and for Kubernetes 项目地址: https://gitcode.com/gh_mirrors/lo/longhorn 点击查看 免费下载 导读 本文围绕 Longhorn 的 BackingImage 增强特性展开&#xff0…

阅读更多 →
淘客网站如何做推广源码下载 2026/9/27 9:34:59

淘客网站如何做推广源码下载

淘客网站推广难?这份保姆级建站教程救急指南 上周凌晨三点,服务器监控突然报警,网站页面被挂满了赌博广告和挖矿脚本。那一刻,我手心全是汗,脑子里一片空白。这就是很多站长遇到的噩梦: 网站被黑挂马不知道怎么办…

阅读更多 →
建筑效果图素材网站被黑挂马?3步性能优化保平安 2026/9/27 9:34:59

建筑效果图素材网站被黑挂马?3步性能优化保平安

建筑效果图素材网站被黑挂马?3步性能优化保平安 网站突然打不开,浏览器弹窗提示“不安全”,或者打开后全是博彩广告,你第一反应是不是懵了?这种“网站被黑挂马”的突发状况,很多做建筑效果图素材站的老板都经历过。别慌,这通常不是玄学,而是服务器配…

阅读更多 →
3步搞定wordpress自动邮件,避开备案坑的建站报价真相 2026/9/27 9:34:49

3步搞定wordpress自动邮件,避开备案坑的建站报价真相

3步搞定wordpress自动邮件,避开备案坑的建站报价真相 备案流程一头雾水?很多湖北的站长和开发者在接 建站报价 单时,往往卡在域名和服务器对接上,导致wordpress自动邮件功能无法测试,甚至上线后收不到任何系统通知。…

阅读更多 →
做曖視頻网站新手入门:3款免费工具帮你省下一半开发费 2026/9/27 9:34:35

做曖視頻网站新手入门:3款免费工具帮你省下一半开发费

做曖視頻网站新手入门:3款免费工具帮你省下一半开发费 自己不会代码,却想搞个视频站点,是不是头大得想砸电脑?别慌,这事儿真没那么玄乎。 以前做这种站,找外包报价起步就是五万八,还得被当猴耍。现在不一样了,用对 免费工具…

阅读更多 →

今日资讯

本周资讯

本月资讯

看完文章仍有疑问?

联系尧图顾问,获取一对一建站咨询

立即免费咨询 📞 400-888-8888
📞 ✉