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

嵐嵐嵐啊

已于 2023-11-22 16:13:36 修改

阅读量989

点赞数 30

文章标签： css 前端

于 2023-11-22 15:53:29 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44031449/article/details/134555185

版权

本文介绍了如何使用纯CSS和SVG的filter属性，结合feTurbulence、feColorMatrix等滤镜元素以及动画效果，实现图片的溶解效果。通过调整alpha通道和模糊处理，创造出动态的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

纯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="你的图片地址" />

解释代码：

<feTurbulence> 元素：产生一种噪波或湍流效果，通过 type="fractalNoise" 指定了噪波的类型为分形噪波，而 baseFrequency=".012" 设置了基本频率。
<feColorMatrix> 元素：将图像的亮度转换为透明度，type="luminanceToAlpha" 表示将亮度转换为透明度。
<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 秒。
<feComponentTransfer> 元素（第二个）：再次进行 alpha 通道的转换。这次使用 type="discrete" 表示使用离散的函数，tableValues="0 1" 表示在输入值为 0 时输出值为 0，在输入值为 1 时输出值为 1。这一步实际上是将 alpha 通道的值变为 0 或 1，形成了离散的效果。
<feGaussianBlur> 元素：对图像进行高斯模糊，stdDeviation="1" 设置了标准差为 1。
<feComposite> 元素（第一个）：使用 operator="in" 将模糊后的图像与原始图像相交，结果命名为 "overlay"。
<feComposite> 元素（第二个）：使用 operator="over" 将 "overlay" 图像与 "underlay" 图像（可能是 SVG 图形的底层图像）组合在一起。