首页/新闻资讯/正文详情

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

发布时间:2026/9/27 8:35:01 来源:云帆数科 栏目:资讯中心
纯 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 ); };物理世界的按压回弹手指按下小滑块微微变宽受压手指松开滑块带着活泼的弹簧振子清脆卡入右侧。把每一个基础控件赋予生命的弹性软件才能真正拥有让人愉悦的互动乐趣。

相关推荐

pandas 与 Dask 分布式并行计算实战:突破单机内存极限的百 GB 数据清洗
pandas 与 Dask 分布式并行计算实战:突破单机内存极限的百 GB 数据清洗

pandas 与 Dask 分布式并行计算实战:突破单机内存极限的百 GB 数据清洗在数据科学与离线特征工程中,分析师经常遇到一种被称为**“单机内存墙(Out-of-Core Memory Barrier)”**的极限挑战: 本地机器只有 16 GB 或 32 G… · 2026/9/27 8:34:55

Go 微服务防御性编程实践:从超时重试风暴到泛型断路器设计
Go 微服务防御性编程实践:从超时重试风暴到泛型断路器设计

Go 微服务防御性编程实践:从超时重试风暴到泛型断路器设计在分布式微服务架构中,单点故障往往并不可怕,最可怕的是局部抖动引发的“级联雪崩”。一个下游依赖出现短暂的 500ms 慢查询,上游服务如果缺乏精准的防御性编程&#xff0… · 2026/9/27 8:34:55

FreeRTOS 软件定时器(Software Timers)底层守护任务与命令队列拓扑剖析
FreeRTOS 软件定时器(Software Timers)底层守护任务与命令队列拓扑剖析

FreeRTOS 软件定时器(Software Timers)底层守护任务与命令队列拓扑剖析在基于 FreeRTOS 的嵌入式系统设计中,当需要执行周期性或单次延时回调(例如:每隔 500ms 翻转一次 LED 状态灯、在收到指令 3 秒后超时关闭电机驱动… · 2026/9/27 8:34:49

涂布后的胶面产生针孔,破坏热封密封性?
涂布后的胶面产生针孔,破坏热封密封性?

在涂布处理后、胶面上可能出现针孔现象。这种现象主要源于不合适的原材料、涂布设备的状态和工作环境等因素。针孔的出现直接影响热封密封性、可能导致漏气或液体渗透进而降低产品质量。另外损坏,给企业带来损失。为了应对这一问题、生产企业需要采取有效措施对生产… · 2026/9/27 9:07:21

避坑指南:网络营销包括哪些?保姆级建站教程
避坑指南:网络营销包括哪些?保姆级建站教程

避坑指南:网络营销包括哪些?保姆级建站教程 做网站最怕什么?不是代码报错,而是上线后发现 模板网站太丑不够用 。客户看着首页直摇头,说这像十年前的东西,根本没法用。很多刚入行的前端或者运营,一上来就找免费模板拖拽,结果做出来的站既没有品牌感… · 2026/9/27 9:07:21

小贝(xiaobei)email-ops 技能实战:从邮件起草到 SMTP 发送的完整 Agent 工作流
小贝(xiaobei)email-ops 技能实战:从邮件起草到 SMTP 发送的完整 Agent 工作流

人工智能AI Agent大模型AI 应用媒体生成 【免费下载链接】xiaobei 为OPC/中小微企业量身打造的自媒体获客智能体 项目地址: https://gitcode.com/gh_mirrors/wi/xiaobei 点击查看 免费下载 本文基于开源仓库 xiaobei 中公共技能 skills/email-ops/SKILL.md 展开&am… · 2026/9/27 9:07:14

网站开发用什么开发工具好呢?搞懂源码下载再选,别被割韭菜
网站开发用什么开发工具好呢?搞懂源码下载再选,别被割韭菜

网站开发用什么开发工具好呢?搞懂源码下载再选,别被割韭菜 网站被黑挂马不知道怎么办?别慌,先检查你的源码下载渠道是否正规,很多漏洞就出在来路不明的代码包里。干了十年建站,见过太多因为选错开发工具或依赖不安全库,导致网站一夜之间变成挂马跳板,… · 2026/9/27 9:07:14

Graylog Web 界面主题字体体系全解析:theme.fonts 的 Family、Size 与 LineHeight
Graylog Web 界面主题字体体系全解析:theme.fonts 的 Family、Size 与 LineHeight

日志分析运维观测 【免费下载链接】graylog2-server Free and open log management 项目地址: https://gitcode.com/gh_mirrors/gr/graylog2-server 点击查看 免费下载 Graylog Web 界面(graylog2-web-interface)使用 styled-components 驱动… · 2026/9/27 9:07:08

MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现
MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现

简介:这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程,从线性调频(LFM)信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑,面向电子信息工程、计算机、数学等专业学生,适用于课程设计、期末大作… · 2026/9/27 0:00:01

汕头网站建设制作厂家避坑指南:5大注意事项救急
汕头网站建设制作厂家避坑指南:5大注意事项救急

汕头网站建设制作厂家避坑指南:5大注意事项救急 改个需求建站公司拖一周,这种憋屈事我见得太多了。 很多汕头老板找本地建站团队,签合同前看着方案挺美,一上线就变脸。 今天不聊虚的,直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01

多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习
多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习

简介:基于PyTorch的多模态虚假新闻检测项目完整代码包,面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者,解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征,以Res… · 2026/9/27 0:00:01

MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现
MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现

简介:这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程,从线性调频(LFM)信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑,面向电子信息工程、计算机、数学等专业学生,适用于课程设计、期末大作… · 2026/9/27 0:00:01

汕头网站建设制作厂家避坑指南:5大注意事项救急
汕头网站建设制作厂家避坑指南:5大注意事项救急

汕头网站建设制作厂家避坑指南:5大注意事项救急 改个需求建站公司拖一周,这种憋屈事我见得太多了。 很多汕头老板找本地建站团队,签合同前看着方案挺美,一上线就变脸。 今天不聊虚的,直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01

多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习
多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习

简介:基于PyTorch的多模态虚假新闻检测项目完整代码包,面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者,解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征,以Res… · 2026/9/27 0:00:01

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码