利用svg頁面高斯模糊

時間 2019-11-08

標籤利用 svg 頁面高斯模糊简体版

原文原文鏈接

先在頁面任意區域放上這段代碼
stdDeviation設置模糊量，最低0html

<svg style="display:none">
    <filter id="blur-effect-1">
        <feGaussianBlur stdDeviation="1"/>
    </filter>
    <filter id="blur-effect-2">
        <feGaussianBlur stdDeviation="2"/>
    </filter>
</svg>

在dom上調用模糊效果dom

document.body.style.filter='url(#blur-effect-2)' //調用2級模糊量

document.body.removeAttribute("style");//關閉模糊效果

1. svg-高斯模糊+swiper倫播
2. 高斯模糊
3. 高斯核-高斯模糊
4. opencv 高斯模糊
5. OpenCV 高斯模糊
6. shader 高斯模糊
7. 高斯模糊（轉）
8. Shader 高斯模糊，鏡頭模糊
9. 高斯函數與高斯模糊
10. 前端 -- 頁面濾鏡效果及高斯模糊效果
更多相關文章...
• SVG 模糊效果 - SVG 教程
• SVG 在 HTML 頁面 - SVG 教程
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• 委託模式

相關標籤/搜索