Question

我需要在页面上动态模糊图像，但只能沿着一个轴（Y专门）。所以这是我的要求：

必须完成＆＃34;直播＆＃34; （我无法预渲染图像的模糊版本）
就像我说的那样，仅在Y轴上（如运动模糊，但垂直）
需要动画
应该可以在IE9 +

我的第一个想法是使用一个简单的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作为替代方案，但无法找到任何只能朝一个方向发展的模糊示例。

Answer 1

如果我正确理解这个问题，可以用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>

CSS模糊仅在一个方向上（运动模糊）

1 个答案: