使用自定义 SVG 图像为 Discourse 启动画面添加品牌标识

我最初尝试在启动画面中使用动画 SVG。虽然在桌面端运行良好,但我发现,在移动设备上,直接对复杂路径或 SVG 内部元素进行动画处理,会导致卡顿,甚至动画停止。

为了确保流畅的体验,我将动画逻辑转移到了包裹 SVG 的标准 HTML 容器(div)上。通过将 CSS 动画(transform、scale、opacity)应用于 div 包装器而非 SVG,移动浏览器可以更高效地利用硬件加速,从而避免卡顿。

5 个赞