使用svg生成夸浏览器的高斯模糊图片
npm i svg-blur -S
import Blur from 'svg-blur'
new Blur('#element', {options})
eg:
const BlurFn = new Blur(document.querySelector('.blur'), {
url: imgurl || '',
blurAmount: 25,
duration: 100,
opacity: 1,
overlayClass: ''
});
react 项目的话在 componentDidMount 里面调用。
componentDidMount() {
const BlurFn = new Blur(document.querySelector('.blur'), {
url: imgurl || '',
blurAmount: 25,
duration: 100,
opacity: 1,
overlayClass: ''
});
}
<div style={{ height: 354 }} className="blur" />