SVG+CSS方形波浪火焰动画实现及性能、兼容问题咨询

API 探路者

2026-6-13

方形波浪边框动画实现与问题咨询

我参考了一个外部示例，将原动画修改为方形样式，并尝试添加类似下方的波浪效果：

带透明通道的波浪边框动画

以下是我目前实现的代码：

CSS 代码

:root {
  --size: 110vh;
  --s: calc(var(--size) / 6);
  --bor: calc(var(--size) / 30);
  --boxShadow: calc(var(--size) / 12);
}
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #000;
  overflow: hidden;
}
.square {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--size);
  height: var(--size);
  filter: url(#wavy) blur(1px);
}
.square:before,
.square:after {
  content: "";
  position: absolute;
  top: var(--s);
  left: var(--s);
  right: var(--s);
  bottom: var(--s);
  border: var(--bor) solid #fff;
}
.square:before {
  box-shadow: 0 0 var(--boxShadow) #0f0, inset 0 0 var(--boxShadow) #0f0;
  -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0002);
  animation: move 5s linear infinite;
}
.square:after {
  box-shadow: 0 0 calc(var(--bor)/2) #fff, inset 0 0 var(--bor) #fff;
}
@keyframes move {
  0% {
    box-shadow: 0 0 var(--boxShadow) #0f0, inset 0 0 var(--boxShadow) #0f0;
    filter: hue-rotate(0deg);
  }
  20% {
    box-shadow: 0 0 60px #0f0, inset 0 0 60px #0f0;
  }
  40% {
    box-shadow: 0 0 40px #0f0, inset 0 0 40px #0f0;
  }
  60% {
    box-shadow: 0 0 80px #0f0, inset 0 0 80px #0f0;
  }
  80% {
    box-shadow: 0 0 100px #0f0, inset 0 0 100px #0f0;
  }
  100% {
    box-shadow: 0 0 var(--boxShadow) #0f0, inset 0 0 var(--boxShadow) #0f0;
    filter: hue-rotate(360deg);
  }
}
svg {
  width: 0;
  height: 0;
}

HTML 代码

<div class="square"></div>
<svg>
  <filter id="wavy">
    <feTurbulence x="0" y="0" baseFrequency="0.009" numOctaves="5" speed="2">
      <animate attributeName="baseFrequency" dur="2s" values="0.02; 0.005; 0.02" repeatCount="indefinite" />
    </feTurbulence>
    <feDisplacementMap in="SourceGraphic" scale="30"></feDisplacementMap>
  </filter>
</svg>

我并非动画专家，上述代码大多由AI生成。我不要求波浪效果像GIF中那样复杂随机，只要风格相近即可。现咨询以下问题：

仅通过少量SVG和CSS能否实现该效果？
若同时运行至少5个该动画实例，对浏览器性能影响如何？
当前代码无法在Safari中正常运行，如何解决该兼容问题？

问题解答

1. 仅通过少量SVG和CSS能否实现该效果？

可以实现。你当前的代码已经用feTurbulence和feDisplacementMap两个SVG滤镜配合CSS动画实现了波浪扭曲效果，完全符合“少量SVG+CSS”的要求。如果想要更贴近GIF的风格，可以微调参数：

降低feTurbulence的baseFrequency值（比如0.005左右），让波浪更平缓；
修改feDisplacementMap的scale值，控制扭曲幅度；
给feTurbulence的seed属性添加动画，让波浪随机变化更自然。

2. 同时运行至少5个该动画实例的性能影响

这类动画的性能消耗主要来自SVG滤镜计算和CSS阴影动画：

桌面端浏览器：5个实例基本不会有明显卡顿，现代浏览器会对滤镜动画做硬件加速优化，但如果元素尺寸很大（比如你用了110vh），可能占用较多GPU资源，建议用浏览器开发者工具的Performance面板监控帧率；
移动端浏览器：中低端设备可能出现帧率下降、卡顿。可优化点包括：缩小元素尺寸、降低滤镜numOctaves值（减少噪声计算量）、添加will-change: filter提前告知浏览器做优化。

3. Safari兼容问题的解决方法

Safari对SVG滤镜和CSS属性的支持存在几个特性差异，对应修复方式如下：

移除-webkit-box-reflect：Safari对该属性的渲染逻辑与其他浏览器差异较大，可直接删除，或用额外DOM元素模拟反射效果；
删除feTurbulence的speed属性：Safari不支持该属性，依赖animate标签的dur控制动画速度即可；
明确feDisplacementMap的in2属性：在Safari中需要指定in2="turbulence"才能正确读取噪声纹理，修改后的滤镜代码如下：

<svg>
  <filter id="wavy">
    <feTurbulence x="0" y="0" baseFrequency="0.009" numOctaves="5" result="turbulence">
      <animate attributeName="baseFrequency" dur="2s" values="0.02; 0.005; 0.02" repeatCount="indefinite" />
    </feTurbulence>
    <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="30"></feDisplacementMap>
  </filter>
</svg>

避免多重滤镜叠加冲突：Safari对filter: hue-rotate()和SVG滤镜的叠加支持不佳，可把色相旋转效果整合到SVG滤镜中，或用CSS变量单独控制颜色动画。

另外，若CSS变量计算出现异常，可临时替换为固定值测试，或用@supports针对Safari做适配处理。

内容的提问来源于stack exchange，提问作者man