如何通过htnl5利用svg来实现高斯模糊的效果?实现效果的方法分享!
2021-07-15 11:09:28
浏览数 (1909)
使用过PS软件的小伙伴们都知道高斯模糊这个效果吧!那么今天我们就来讲一下有关于:“如何通过htnl5利用svg来实现高斯模糊的效果?”这个问题,下面是小编整理的相关内容,有感兴趣的小伙伴们快来参考学习了解吧!
先在页面任意区域放上这段代码:
stdDeviation设置模糊量,最低0
<svg style="display:none">
<filter id="blur-effect-1">
<feGaussianBlur stdDeviation="1"/>
</filter>
<filter id="blur-effect-2">
<feGaussianBlur stdDeviation="2"/>
</filter>
</svg>
在dom上调用模糊效果:
document.body.style.filter='url(#blur-effect-2)' //调用2级模糊量
document.body.removeAttribute("style");//关闭模糊效果
通过上面我们说的这两端代码中就对我们高斯模糊效果有所了解,当然如果你对html有感兴趣的话我们可以在W3Cschool中进行学习和了解。