暖米色的首屏，左边是标题、简介和两个按钮，右边悬着三只大小不一的玻璃气泡——不是正圆，而是被轻轻捏过的不规则液滴形状。泡内映着山脉与云海，边缘一圈高光和折射把它衬得很有厚度；最大的那只气泡外缘还有一圈沿着轮廓滚动的文字，字随着弧线拐弯，一圈圈永不停歇。鼠标在页面上移动时，三只泡各自以不同的倍率浮动，最小的动得最快，形成明确的前后层次。

这套视觉里没有一张 3D 渲染图。气泡的形状是 SVG 路径，玻璃质感由多层滤镜和渐变叠出来，环绕文字用的是路径文字，视差是几行脚本。整个首屏除了一张风景照，其余全部是矢量与代码。

这只玻璃气泡由四层构成

形状层。一条手工调过的贝塞尔闭合路径，避免完美圆形带来的呆板；同一条路径被反复引用——裁剪内容、描边、以及给文字当轨道。
折射层。风景图被裁进气泡内部并做了轻微放大与位移，模拟透过玻璃看到的偏移；上面再叠暖色调的半透明矩形统一色温。
光泽层。气泡边缘的一圈亮边、内部的高光斑和底部的暗部，都是形状与渐变的组合，正是它们决定了“这是玻璃而不是贴图”。
文字层。两条路径文字前后相接，各自带一段起始偏移的循环动画，首尾相衔形成无缝滚动。

三处值得学的做法

其一，无缝跑马字用的是两条错开一整圈的文本。第一条从 0% 走到 100%，第二条从 -100% 走到 0%，两条同时播放、同样时长。当第一条即将走出路径末端时，第二条正好补进开头，接缝处永远有字，看不出循环。这是路径文字做环形跑马灯的标准解法，比在脚本里手动重排轻得多。

其二，视差用了目标值加缓动追赶。指针事件只更新目标坐标，真正的位移在动画循环里逐帧逼近：

currentX += (targetX - currentX) * PARALLAX_SMOOTHNESS;

好处有两个：一是鼠标高频移动不会导致抖动，二是鼠标离开页面后位移会平滑归零，而不是突然弹回。三只泡使用同一组坐标，只是各自乘上 1、1.55、2.15 三个倍率——用一套状态驱动多层视差，改起来只需要动倍率。

其三，强度被抽成了一个"魔法数字"。脚本顶部只有两个可调常量：视差强度与平滑度，注释里直接写明了推荐区间和各档的手感。这种把可调项集中在文件开头并写清取值含义的做法，对要拿去改的模板来说非常友好。

拿到源码后能改什么

换泡里的图片只改一处路径。建议选层次分明的风景或抽象纹理，气泡会对它做放大与裁切，细碎的画面在缩小的小泡里会糊。整体色温由那层半透明的暖色矩形控制，改颜色和不透明度就能从暖阳调切到冷调。

环绕文字直接改标签里的文本即可，用分隔符隔开几组词。注意两条文本内容必须完全一致，否则接缝处会露馅。滚动速度是两个动画的时长，同改即可；改成反向滚动则把起止偏移对调。

气泡形状是路径数据，想改可以把它拿到矢量工具里编辑再粘回来——注意路径同时被裁剪、描边和文字轨道三处引用，改一处即可全部生效，这正是引用式写法的好处。左侧的文案区、导航、底部信息条都是常规布局，替换成自家内容没有障碍。

运行提示：效果依赖 SVG 滤镜与路径文字动画，主流浏览器近年版本均可运行；不同浏览器对滤镜的渲染略有差异，玻璃高光的强弱可能稍有不同。页面可直接双击 index.html 打开，无需服务器。视差跟随在触摸设备上不会触发，气泡保持静止，其余效果正常。建议使用近两年版本的 Chrome、Edge、Firefox 或 Safari。详细运行方法请参见压缩包内的帮助文档。

关于玻璃气泡特效的常见问题

可以把泡里的图换成视频吗？

可以，用 SVG 的外部对象容器包一个视频元素并套用同一条裁剪路径即可。要注意视频解码开销比图片大，三只泡都放视频时建议改用同一个视频源。

环绕文字能放中文吗？

能，本示例已经是中文。汉字沿曲线排布时字与字之间的旋转差比英文更明显，建议适当加大字间距，并避免使用过长的连续文本。

手机上怎么显示？

布局会改为上下堆叠，气泡缩小到合适尺寸。由于没有指针移动，视差静止，可以考虑在移动端给气泡加一段缓慢的自动漂浮动画补足动态感。

为什么我的气泡边缘发虚或有锯齿？

SVG 滤镜的默认滤镜区域可能裁掉了模糊的外扩部分。检查滤镜元素的作用范围设置，适当扩大范围通常就能解决；若是锯齿，确认路径描边的宽度不是亚像素值。

它适合什么站点

这是典型的创意机构首屏：设计工作室、动效团队、独立开发者的作品集、品牌介绍页。气泡加环绕文字的组合信息密度低但辨识度高，也很适合做产品发布页的视觉主体，或者截取气泡部分单独用作装饰元素。路径复用、双段无缝跑马字与多层视差的完整写法都在源码里，注释分区清晰，下载后可查看。