使用SVG feDisplacementMap特性实现图片脉冲波动动画特效

SVG waves with feDisplacementMap

svg, wave, picture

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4823
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const filterFeImage = document.querySelector("#f feImage");
const xlink = "http://www.w3.org/1999/xlink";

let displacement = 0;
let speed = 0.2;

/*
</radialGradient> 
<rect id="witness" width="300" height="300" fill="url(#rg)"></rect>*/

xlinkHref +=
        "%3C/radialGradient%3E%3C/defs%3E%3Crect id='witness' width='300' height='300' fill='url(%23rg)'%3E%3C/rect%3E%3C/svg%3E";

return xlinkHref;
}

function AnimateOffset() {
    let xlinkHref = setXlinkHref();
    filterFeImage.setAttributeNS(xlink, "href", xlinkHref);
    ripples.setAttributeNS(xlink, "href", xlinkHref);

if (displacement <= 20) {
        displacement += speed;
    } else {
        displacement = 0;
    }

window.requestAnimationFrame(AnimateOffset);
}

window.requestAnimationFrame(AnimateOffset);

编译

CSS

HTML

<h4>SVG waves with feDisplacementMap</h4>
<p>Working on Chrome, Opera, Firefox & Edge</p>
<div>
    <svg width="300" height="300">
        <desc>First SVG: definitions and the radial gradient used for the feDisplacementMap filter</desc>
        <defs>

</div>

SVG waves with feDisplacementMap

svg, wave, picture

编辑器支持Emmet

快捷键

SVG waves with feDisplacementMap

svg, wave, picture

使用SVG feImage和feDisplacementMap滤镜属性实现的图片特效

使用SVG feTurbulence, feColorMatrix, feDisplacementMap特性实现文本火焰填充特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：