htnl5利用svg页面高斯模糊的方法-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

这篇文章主要介绍了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");//关闭模糊效果

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问Html5视频教程！

相关阅读 >>

利用HTML5中的canvas绘制笑脸的代码

HTML5中垂直上下居中的解决方案

HTML5实践-如何使用css3丰富图片样式的详解（二）

h5离线缓存是什么？h5 manifest离线缓存的应用（附代码）

详细介绍h5弹性盒布局的使用（父容器属性）

h5中在拖动的元素或选择的文本进入到有效的放置目标时触发的事件ondragenter

更多相关阅读请进入《HTML5》频道 >>

书籍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » htnl5利用svg页面高斯模糊的方法

htnl5利用svg页面高斯模糊的方法

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论