「带尖角的那个对话框叫什么」——它在中文里一般叫气泡对话框，代码里写作 speech bubble；如果是悬停才冒出来的那种提示，英文叫 tooltip，做法相通但用途不同。真正动手做的时候，难的从来不是那个圆角矩形，是尖角。
尖角有三种主流做法：
伪元素画透明边框——给
::after设上border: 10px solid transparent，只留一条边有颜色，就得到一个三角形。最老、也最好懂的一种，本文第 03 款走的是这条路。clip-path——把气泡和尖角当成一个整体路径切出来，形状自由度高。mask或border-image——适合不规则的、爆炸形的轮廓。第 06 款把后两条路的二十种变体一次性给全了。
选哪一种，取决于你要不要给气泡加阴影。box-shadow 是围着元素整个盒子画的，而尖角是伪元素、在盒子之外，于是阴影会在尖角根部断掉——这就是做气泡时那个「怎么看怎么别扭」的来源。
正确做法是改用 filter: drop-shadow()。MDN 把两者的区别说得很清楚：box-shadow 在元素整个盒子后面生成矩形阴影，而 drop-shadow() 生成的阴影「符合图像本身的形状（alpha 通道）」。caniuse 上 CSS 滤镜的全球支持率是 97.02%，放心用。
还有一条，做 tooltip 的人容易踩：用 ::before / ::after 的 content 生成的提示文字不进 DOM。MDN 在无障碍一节写得很直白——「CSS 生成的内容不包含在 DOM 中。因此它不会出现在无障碍树里，某些辅助技术与浏览器的组合不会朗读它。如果这些内容承载了理解页面所必需的信息，更好的做法是把它放进主文档。」所以纯 CSS 的 tooltip 拿来放「点这里复制」这种补充说明没问题，拿来放表单的必填说明就不行。
下面十七款分四组：
用来说话的气泡（01–05）——漫画分镜、聊天界面、可直接复用的基础款
用来提示的气泡（06–08）——tooltip 与形状样本册
长在控件上的气泡（09–12）——滑块数值、开关形变、上传进度
飘起来的泡泡（13–17）——不是对话气泡，是装饰动画
第一组 · 用来说话的气泡
01. 九款漫画气泡，圆角、尖角、爆炸形都有
一次给到九种样式，圆角、尖角、爆炸形齐全，尖角方向能自动指向。全 CSS，没有图片。
做漫画站、教程配图、产品截图上的标注，这一款的覆盖面是本文最广的——九选一总有一个对得上你的调性，不用自己去调三角形的角度。
02. 把整页排成漫画分镜
它不只是气泡，是一整套漫画排版：网格布局模拟分镜，文本气泡可编辑，预置了 WOW!、POW!、OMG!、YES!、OOPS! 这类拟声词。
它给的是一个完整版式，不是能摘出来单用的组件——你得接受这个分镜结构。接受了，故事型的产品介绍和操作教程会很出彩。
03. 最干净的那个基础款
无图片，只用伪元素加 border 属性把气泡和尖角构出来，指向的方位可以动态换。它就是开头讲的第一种做法的标准实现——要的不是花样而是一个能改、能读懂、能长期维护的底子，从这一款开始改最省心。
04. 三栏 IM 界面的整套壳子
仿 WhatsApp 桌面端的三栏布局，聊天、状态、通话都在。气泡只是其中一部分，它给的是整个即时通讯界面的壳。
技术栈比这篇里其他款都重：布局动效用 GSAP，背景那层流动的光晕渐变是 Three.js 着色器渲染的。只想要聊天气泡的话，这一款是杀鸡用牛刀；要做 IM 产品原型或者作品集里的一个展示页，它的完成度值这个重量。
05. 两百行 CSS 的聊天窗口
另一个极端：纯 CSS 加两行 JavaScript，作者标的是两百行左右 CSS 就搞定了整个聊天窗口，联系人能收起能展开，还带「正在输入」的动画。
用法也交代得很清楚——把用户信息、头像和聊天内容塞进预定义的 contact class 里就行。要在官网右下角挂一个客服样式的窗口，这一款的改造成本最低。
第二组 · 用来提示的气泡
06. 二十种形状，一次给全
二十款不同形状的提示框和气泡对话框，作者列出了用到的关键属性：clip-path、border-image、mask-*。也就是开头说的第二、第三条路，在这里被做成了一本样本册。
拿它当参考实现最合算：挑中一个形状，把对应那段 clip-path 抄走，配色和字号按自己站的规范改。
07. 不用伪元素的 tooltip
圆角和直角两种样式，上下左右四个开口方向，作者强调的一点是它不需要额外的伪元素。
这一点在实际项目里比听上去有用：伪元素只有 ::before 和 ::after 两个名额，一旦你的按钮已经用它们放了图标或者下划线动画，再加 tooltip 就会打架。
08. 跟着鼠标晃的提示气泡
基于 GSAP ScrollTrigger：鼠标横向划过文字时，提示气泡跟着划的方向左右摆。
这一组里唯一带「物理感」的一款，适合作品集、介绍页这种可以慢慢看的地方。表单和后台里不建议用——那些场景要的是提示立刻停稳、看得清。
第三组 · 长在控件上的气泡
这四款里气泡不是独立元素，而是某个控件的一部分：滑块上的数值、开关里的形变、上传进度的容器。
09. 滑块上跟着走的数值气泡
在 input[type="range"] 上加了一个跟着滑块走的数值气泡，拖拽和跟随全靠 CSS，没有 JavaScript。音量、价格区间、透明度这类设置项，光有一条轨道用户是看不出自己调到多少的——这一款把那个数字补上了，而且没引入任何脚本。
10. 同系列的静态版
同一位作者的另一款，气泡是静态的、不追随，实现上用的是 ::-webkit-slider-thumb 伪元素加渐变背景和变量计算。作者在两款的详情页里互相做了指路。
选哪个很简单：需要用户边拖边读数就选上一款，只是想把原生滑块变好看就选这一款——它更轻，也少一份动画开销。
提醒一句，::-webkit-slider-thumb 是带前缀的伪元素，Firefox 那边对应的是 ::-moz-range-thumb，两边都要写才不会掉样式。
11. 开关一拨，气泡被挤到一边
Gooey（黏糊糊）效果的拨动开关，拨过去的时候那团「液体」被挤到一侧再弹回来。按钮本体是 SVG，动画是 CSS，切换事件交给 JavaScript。
开关本身只是一个是与否，视觉上没什么可做的。这一款靠形变把那一下切换变得有手感，代价只是一段 CSS 动画，不需要额外的图片或字体图标。
12. 上传中的那朵云会鼓成大气泡
点击上传后云朵逐渐膨胀成一个大气泡，内部有小气泡不断升腾，进度到 100% 时气泡涨到最大，中心显示上传成功。
进度条只回答「还要多久」。等待这段时间里用户看什么，这一款给了一个答案。同类的等待动画在12 款 CSS 加载动画与进度条效果里还有一批。
第四组 · 飘起来的泡泡
把这五款放进来，是因为中文里它们也叫「气泡」，搜的人经常在两者之间来回。但它们和对话没有关系，是装饰：往上飘、会融合、会破裂。要找对话气泡的，前面三组就够了。
13. 两个空标签做出来的写实肥皂泡
作者把做法写得很细：整个页面只有两个空标签，没有图片也没有 JS。通透感靠渐变叠加——一层径向渐变把中心掏空，两层方向相反的彩虹线性渐变挤到上下边缘，再用 screen 混合模式让颜色互相穿透，模拟皂膜的干涉色；边缘由五层内阴影堆出来；高光用了四处伪元素。
最见功力的是浮动动画不是简单的上下平移，而是配了轻微旋转和非等比缩放，泡泡飘的时候会略微变形。
缺点作者自己也写了：所有位置都是固定像素值，改尺寸得整套重算，他的建议是按现有 320px 尺寸整体缩放。它适合当一个固定大小的装饰件，塞进响应式布局里自适应会很难受。
14. 两个球碰到一起融成一个
Metaball（粘液融合）效果——两个彩色球体靠近时边缘互相吸引，接触后合并成一个更大的球。
这类效果的经典做法是 SVG 滤镜里 feGaussianBlur 加 feColorMatrix 那一套，作者说这一款没走矩阵滤镜，直接操作 filter 和 animation 就实现了，底层代码更简洁。想弄明白这个效果怎么写，它比标准解法好读。
15. 啤酒和香槟里的气泡
气泡自然生成、随机上浮、到顶消散，大小、上升速度和透明度各不相同。酒水品牌、餐饮、节庆活动页——这是少数几个「气泡」能直接对上产品本身的场景，不是装饰，是在画产品。
16. 挥一下泡泡棒
GSAP 驱动的互动：用户摇动泡泡棒，泡泡就被吹出来，带物理模拟。它需要用户动手，所以别放在首屏当背景——放在活动页里当一个可玩的小环节更合适。
17. 鼠标划过就冒泡，过几秒破掉
GSAP 加 Canvas：鼠标滑动时生成大小不一的泡泡，带上升和下落，过一会儿逐个破裂。
「会破」这一点值得单独说——大多数鼠标跟随特效只管生成不管消失，时间长了屏幕上糊成一片。这一款自带生命周期，是这一组里唯一一个不用你操心收尾的。
十七款可以在童哲网前端特效资源里逐个打开预览。第 11 款那种把形变用在控件上的做法，14 款 CSS 按钮与开关交互效果里成系统地铺了一遍；如果你真正要解决的是「怎么不打扰用户地提示一句话」，该看的是小红点、Toast 还是弹窗；第 09、10 两款滑块属于表单控件，同类的还在14 款表单与登录界面效果里。
