svg + css 实现图片溶解过渡效果

纯css 加 svg 实现了图片溶解效果，亲测有效，特此记录~

大致逻辑为 svg 的滤镜 加上 css 的 filter 属性

<svg width="0" height="0">
            <defs>
                <filter id="turbulent-dissolve" x="0%" y="0%">
                    <feTurbulence type="fractalNoise" baseFrequency=".012" />
                    <feColorMatrix type="luminanceToAlpha" />
                    <feComponentTransfer>
                        <feFuncA type="linear" slope="0">
                            <animate attributeName="slope" values="2;2;2;2;2;2;1.5;1;0.5;0" dur="3s" />
                        </feFuncA>
                    </feComponentTransfer>

                    <feComponentTransfer>
                        <feFuncA type="discrete" tableValues="0 1" />
                    </feComponentTransfer>
                    <feGaussianBlur stdDeviation="1" />
                    <feComposite operator="in" in="SourceGraphic" result="overlay" />

                    <feComposite operator="over" in="overlay" in2="underlay" />
                </filter>
            </defs> 
        </svg>

        <img style={filter: url('#turbulent-dissolve')} width="800" height="600" src="你的图片地址" />

解释代码：

1. <feTurbulence> 元素：产生一种噪波或湍流效果，通过 type="fractalNoise" 指定了噪波的类型为分形噪波，而 baseFrequency=".012" 设置了基本频率。

2. <feColorMatrix> 元素：将图像的亮度转换为透明度，type="luminanceToAlpha" 表示将亮度转换为透明度。

3. <feComponentTransfer> 元素（第一个）：将 alpha 通道进行转换。其中包含一个 <feFuncA> 子元素，type="linear" 表示使用线性函数，slope="0" 表示斜率为 0。而 <animate> 元素通过 attributeName="slope" 和 values="2;2;2;2;2;2;1.5;1;0.5;0" 创建了一个动画效果，逐渐改变 alpha 通道的斜率，实现了逐渐溶解的效果。动画的持续时间为 3 秒。

4. <feComponentTransfer> 元素（第二个）：再次进行 alpha 通道的转换。这次使用 type="discrete" 表示使用离散的函数，tableValues="0 1" 表示在输入值为 0 时输出值为 0，在输入值为 1 时输出值为 1。这一步实际上是将 alpha 通道的值变为 0 或 1，形成了离散的效果。

5. <feGaussianBlur> 元素：对图像进行高斯模糊，stdDeviation="1" 设置了标准差为 1。

6. <feComposite> 元素（第一个）：使用 operator="in" 将模糊后的图像与原始图像相交，结果命名为 "overlay"。

7. <feComposite> 元素（第二个）：使用 operator="over" 将 "overlay" 图像与 "underlay" 图像（可能是 SVG 图形的底层图像）组合在一起。