CSS模糊仅在一个方向上(运动模糊)

Question

我需要在页面上动态模糊图像,但只能沿着一个轴(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模糊:

<?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不支持url()作为值filter.另外,我无法为它设置动画,因为值是URL而不是数字,所以transition不起作用.

最重要的是,我认为这些方法中的任何一种都不适用于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>