我需要在页面上动态模糊图像,但只能沿着一个轴(Y
专门)。所以这是我的要求:
Y
轴上(如运动模糊,但垂直)我的第一个想法是使用一个简单的CSS过滤器:
img {
filter: blur(20px);
}
我可以通过添加转换(transition: filter 0.2s linear
)来设置动画,但它只会创建高斯模糊,这不是我想要的效果。语法不支持filter: blur(0 10px);
之类的内容,只能将模糊限制为一个轴。
然后我读到模糊过滤器(以及其他)实际上只是SVG过滤器的简写,如果需要,可以手动编写。所以我创建了一个名为filter.svg
的SVG,它仅在Y
轴(0 20
)上指定20px模糊:
<?xml version="1.0" standalone="no"?>
<svg width="1" height="1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="0 20" />
</filter>
</defs>
</svg>
并像这样应用:
img {
filter: url("filter.svg#blur");
}
这完全有效......但在Firefox中仅 。 Safari/Chrome don't support url()
作为filter
的值。另外,我无法为其设置动画,因为该值是网址而不是数字,因此transition
无效。
最重要的是,我不会想到这些方法work in IE9。
那么:是否有任何方式来做我想做的事情?我已经考虑过使用canvas
作为替代方案,但无法找到任何只能朝一个方向发展的模糊示例。
答案 0 :(得分:0)
如果我正确理解这个问题,可以用JQuery完成。
CSS3确实有它的限制,它在交互值方面非常有限。
Jquery还增加了跨平台稳定性。
JQuery的
$(document).ready(function() {
var $img = $('.image')
$img.hide();
$img.show().animate({
opacity: 100,
paddingTop: '+=80'
}, 500)
});
这是一个如何与javacript一起使用的示例 愚弄不透明。
function myMove() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 150) {
clearInterval(id);
} else {
pos++;
elem.style.left = pos + 'px';
}
}
}
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id="container">
<div id="animate"></div>
</div>