我需要在页面上动态模糊图像,但只能沿着一个轴(Y
特别是).所以这是我的要求:
必须要做"现场"(我无法预渲染图像的模糊版本)
就像我说的,只在Y
轴上(如运动模糊,但垂直)
需要动画制作
应该在IE9 +中工作
我的第一个想法是使用一个简单的CSS过滤器:
img { filter: blur(20px); }
我可以通过添加transition(transition: filter 0.2s linear
)来设置动画,但它只会创建高斯模糊,这不是我想要的效果.语法不支持filter: blur(0 10px);
将模糊仅限制为一个轴.
然后我读到模糊过滤器(以及其他)实际上只是SVG过滤器的简写,如果需要,可以手动编写.所以我创建了一个名为SVG的SVG filter.svg
,它只沿Y
轴(0 20
)指定20px模糊:
并像这样应用它:
img { filter: url("filter.svg#blur"); }
这完全有效......但仅限于Firefox.Safari/Chrome不支持url()
作为值filter
.另外,我无法为它设置动画,因为值是URL而不是数字,所以transition
不起作用.
最重要的是,我认为这些方法中的任何一种都不适用于IE9.
所以:有什么方法可以做我想做的事情吗?我已经考虑过使用canvas
替代方案,但是找不到任何只能朝一个方向发展的模糊的例子.