页面要跟用户说一句话，可选的形式其实排得出一条线：角标、骨架屏、Toast、顶部横幅、模态框。它们做的事是同一件——把信息递过去——区别只在你允许它打断用户到什么程度。
这条线上的位置一旦选错，代价是不对称的。该轻的做重了，用户记住的是「这个站老弹东西」；该重的做轻了，付款失败的提示两秒钟就滑走了，人还在那儿等着。而多数人挑这类组件时是按好看程度挑的，很少按「它有多打扰人」挑。
所以下面 15 款不分类别、不按技术分组，从完全不打断排到挡住整屏，一档一档往上走。每一档会说清楚它换来了什么、代价是什么，以及那一档上真正该守的规矩。
第一档 · 它不打断你，只是在那儿亮着（01 - 04）
这一档的共同点是：不占用主内容区，不打断任何正在进行的操作，用户什么时候想看就什么时候点开。代价是它不保证被看见——重要到必须立刻知道的事，不能只靠这一档。
01. 铃铛加数字：最小的那个通知单元
纯 CSS
一个会晃的铃铛，右上角挂消息数量。整个效果没有 JavaScript，晃动和角标都是 CSS 做的。它值得放在第一位不是因为复杂，恰恰是因为够简单——这是「有新东西」这件事在界面上的最小表达，几乎所有后台和社区站都从这儿起步。
02. 同一个铃铛，把数字烧起来
SVG + CSS
同样是铃铛加数字，这一款把数字做成了燃烧的火焰动画，摇晃幅度也更大。它和上一款是同一个位置上的两种音量：第 01 款适合后台系统里那种一天响二十次的通知，这一款适合一天最多响一次、响了就该去看的场景。动效强度本身就是一种优先级标注，同一个界面里别把两种混着用。
03. 点开铃铛之后：一个能筛未读的通知中心
纯 CSS 未读筛选
前两款只解决「告诉你有」，这一款解决「你点开之后看什么」。点铃铛展开通知列表，带一个过滤按钮可以只看未读，收起也是点铃铛。整套仍然是纯 CSS，没引任何库。
通知中心是个容易被低估的组件：一旦你的站开始有两种以上的通知来源（系统消息、评论回复、订单状态），没有这么一个收纳处，就只能靠一档更高的形式去弹，用户很快会烦。
04. 通知卡片的样子：液态玻璃
纯 CSS 毛玻璃模糊
半透明渐变加柔和光影做出流动玻璃的质感，每条通知带轻微的毛玻璃模糊，首条还有一圈中心扩散动画。它是上一款的皮肤层——结构照旧，观感换掉。
用这种半透明质感有个前提：背景要够干净。毛玻璃叠在花哨的背景图上，文字对比度会掉得很快，通知这种以「读得清」为第一要务的组件，最怕的就是这个。
第二档 · 还没话说的时候，先占住位置（05）
这一档只有一款，但它是整条线上最容易被跳过的一环。内容还没到，页面已经在那儿了——这段空白期你不处理，用户看到的就是一片惨白，然后是内容砸下来时的整页跳动。
05. 骨架屏：连「不想看动画的人」都想到了
CSS + JS 明暗双模式 减少动画选项
移动端骨架屏，内容加载前先用灰块把版式占出来，避免加载间隙的生硬空白，也避免内容到位时的布局跳动。它同时给了浅色和深色两套，夜里用深色不刺眼。
真正让这一款值得单独讲的是那个「减少动画」开关。骨架屏那道来回扫的高光对前庭功能敏感的人来说是实打实的不适，浏览器层面早就有标准答案：prefers-reduced-motion 这个媒体查询按 caniuse 的统计全球支持率已达 96.45%（Chrome 74、Firefox 63、Safari 10.1、Edge 79 起支持），读取系统设置就能知道用户要不要动画。这一款把选项做进了界面，是更进一步的做法。做任何持续循环的动效，这条都该顺手加上。
第三档 · 冒个头，说完就走（06 - 09）
Toast 是这条线的中点，也是被用得最随便的一档。它的性质要说清楚：Toast 是「操作反馈」，不是「信息发布」。「已保存」「已复制」「网络断了」适合它；需要用户读完才能继续的事，一律不适合——因为它会自己消失，而你不知道人有没有看见。
06. 最朴素的那种：弹出、停几秒、自己走
HTML + CSS + JS
轻量到没有多余东西，表单提交完、操作成功了给一句反馈就够。整条线上你最常需要的其实就是它。
07. 带倒计时进度条的 Toast：把「还剩几秒」画出来
Canvas + JS 倒计时进度条
在普通 Toast 上加了一圈用 Canvas 画的倒计时动画，用户能看见它还会停留多久。比起「突然就没了」，这是个明显的体验改进。
顺着这个说一条容易被忽略的规矩：会自动消失的内容，属于无障碍标准里的「时间限制」。W3C 的 WCAG 2.1 成功准则 2.2.1「可调整时间」（Timing Adjustable，A 级）要求这类时间限制至少满足以下三条之一：
能关掉——用户在遇到时间限制之前就可以取消它；
能调整——允许调到默认时长的十倍以上；
能延长——到期前发出警告，并留至少 20 秒、允许用简单操作延长，且可延长十次以上。
落到 Toast 上，最省事的做法是：鼠标悬停或获得焦点时暂停倒计时，并且始终留一个关闭按钮；关键信息则干脆别让它自动消失。这一款把剩余时间可视化，等于先把「有个时间限制」这件事告诉了用户，方向是对的。
08. 四种状态，四种颜色，边缘还会溅一下
纯 CSS 4 种状态
警告、错误、成功、帮助四款一套，蓝绿橙红四色区分，右上角都有小叉号可以手动关。视觉上的花招是用 background 的 radial-gradient 做出液体溅射的边缘，纯 CSS，没有图片。
颜色加图标双重编码是这一款做对的地方——只靠颜色区分状态，对色觉障碍用户等于没区分，图标补的就是这一层。
09. 25 种风格一次给你，直接在界面上切
CSS + JS 25 款风格
右下角弹出的提示框，内置 25 款风格，主题和动效都能在预览界面上实时切换。它的用法和前三款不太一样——与其说是一个组件，不如说是一份挑选样张：先在里面找到符合你界面气质的那一款，再把对应的那套样式拿走。后台系统要统一通知样式时，这种给足选项的资源比单款效果省事。
第四档 · 横在页面顶上，不关掉不走（10 - 12）
到这一档，信息开始占用页面空间、挤压正文。换来的是它不会自己消失——用户必须做一个动作才能让它走。这一档几乎就是为两类内容准备的：状态通告，和合规告知。
10. 顶部横幅：能关，且关掉之后不再纠缠
CSS + JS 可关闭
顶部通栏提示，支持成功、错误、信息几种类型，进出都有平滑动画，带手动关闭。适合放系统维护公告、活动期通知、配送延迟说明这类「不看会吃亏、但不影响当前操作」的内容。
11. Cookie 同意面板：把「拒绝」做得和「接受」一样好按
CSS + JS + GSAP 分类开关 localStorage 记忆
这一款把 Cookie 同意做成了一块紧凑的面板：必需、偏好设置、分析、市场营销四类各有开关，再配「全部接受」「保存」「拒绝非必要」三个快捷按钮，选择存进 localStorage，之后不再重复弹。保存时有一小段 GSAP 驱动的撒花动画。
那三个并列按钮不是设计上的随意选择。GDPR 第 7 条第 3 款写得很明确：撤回同意应当和给予同意一样容易（"It shall be as easy to withdraw as to give consent"）；同条第 2 款还要求同意请求要以清晰、可理解、易于获取的形式，与其他内容明确区分开。落到界面上，就是「拒绝非必要」不能藏进二级页面，而「全部接受」是个大绿按钮——这套面板把三个动作摆在同一层，是合规设计里最基本的形态。做面向欧盟访客的站，这一条躲不掉。
12. 更轻的那种 Cookie 提示：一个函数，一个有效期
JavaScript 默认 30 天
只有接受和拒绝两个选项，接受之后写一个 Cookie，默认有效期 30 天，这个天数可以自己改，过期前不再弹。代码量极小，适合只是想有个基本告知、不做分类管理的站。
要清楚它的边界：这一款是「告知型」的，不是「同意管理型」的——它不做分类授权，也不给用户事后改主意的入口。业务不涉及欧盟用户、只想在首访时说明一下 Cookie 用途，它够用；要满足上一款那套要求，就得用上一款。
第五档 · 挡住整屏，必须回应（13 - 15）
最重的一档。模态框的全部价值在于它强制中断——用户不处理就不能继续。所以它只该用在两种时候：确认一个不可逆的操作（删除、支付、注销），或者报告一个必须被知道的结果。除此之外的用法，都是在消耗用户的耐心。
13. 成功与失败：用一段 SVG 动画把结果说清楚
Bootstrap 5 SVG 动画
成功和错误两种结果态弹窗，中间那个对勾或叉号是 SVG 动画画出来的。因为直接基于 Bootstrap 5 的模态组件，站本身如果就是 Bootstrap 5，这一款几乎是零成本接入——圆角、宽度、描边这些在 CSS 里调两行就能对上自家风格。
14. 24 种入场动效，一个外部库都不引
CSS 3D + JS 24 种动效
翻转、弹跳、3D 折纸等 24 种模态框入场动画，全部用 CSS 的 3D 变换和贝塞尔曲线过渡做，不引入任何第三方动效库。作者在详情页里把这件事当成核心卖点讲：为了一个弹窗动画去装一个庞大的动效库，拖慢的是整站的首屏加载。
这个判断值得认同。弹窗动画属于典型的「锦上添花」需求，用它换掉首屏几百 KB 的 JS 是笔亏本买卖。顺带一提，这一档的动效尤其该配合第 05 款提到的 prefers-reduced-motion——整屏元素做 3D 翻转，对动效敏感的人是最难受的一种。
15. 自动弹出的那一种：能力给你了，用不用是另一回事
jQuery 延时 / 滚动触发 自动关闭
轻量的 jQuery 弹窗，能装图片、视频或任意 div，支持自定义延时弹出、自动关闭，也能绑到窗口滚动这类事件上触发。功能本身做得干净，广告位、新闻公告、活动弹层都能用。
但这一档到这里必须把话说完整。Google 从 2017 年 1 月 10 日起，把移动端「侵入式插页广告」纳入了排名考量：用户从搜索结果点进来、内容却被弹层盖住的页面，排名可能受影响。官方列出的例外只有三类——法律义务要求的告知（Cookie 同意就在其中）、非公开内容的登录墙，以及占屏比例合理、不妨碍阅读的横幅。
所以这一款的正确用法是：别在落地瞬间弹。把触发条件改成滚动到一定深度、或者停留若干秒之后，用它自带的滚动触发就能做到；移动端则考虑降一档，换成第 10 款那种顶部横幅。技术上能自动弹，不等于应该自动弹。
五档各归各位
| 这一档是什么 | 该用它的时候 | 不该用它的时候 |
|---|---|---|
| 一 · 角标与通知中心 | 积攒型信息：评论回复、系统消息、订单状态更新 | 必须立刻知道的事——它不保证被看见 |
| 二 · 骨架屏 | 内容在路上、版式可以预先占位的加载期 | 加载快到一闪而过，反而制造闪烁 |
| 三 · Toast | 操作反馈：已保存、已复制、提交成功 | 需要用户读完才能继续的内容 |
| 四 · 顶部横幅与 Cookie | 状态通告、合规告知，要留到用户处理为止 | 日常反馈——长期占着顶部会被视而不见 |
| 五 · 模态框 | 不可逆操作的确认，和必须被知道的结果 | 落地即弹的营销内容（移动端尤其） |
挑之前先问一句：这条信息如果用户没看见，会发生什么？什么都不会发生，就往第一档放；他会白等或者做错事，才值得往上走。这条线上越往上，权限越大，也越该省着用。
本文 15 款都在童哲网前端资源板块。相关的几篇：表单与登录界面效果（第 13 款那种结果弹窗的上一步）、CSS 加载动画与进度条效果（第 05 款骨架屏的邻居）、卡片与布局效果（第 04 款那类质感卡片的完整做法）、CSS 按钮与开关交互效果（第 11 款那几个分类开关的样式来源）。
