8

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

  • 必须“现场”完成（我无法预渲染图像的模糊版本）
  • 就像我说的，只在Y轴上（像运动模糊，但垂直）
  • 需要动画
  • 应该在 IE9+ 下工作

我的第一个想法是使用一个简单的 CSS 过滤器：

img {
    filter: blur(20px);
}

我可以通过添加过渡 ( transition: filter 0.2s linear) 对其进行动画处理，但它只会创建高斯模糊，这不是我想要的效果。该语法不支持filter: blur(0 10px);将模糊限制在一个轴上。

然后我读到模糊过滤器（除其他外）实际上只是 SVG 过滤器的简写，如果需要，您可以手动编写。因此，我创建了一个名为 SVG 的名称，它仅沿轴 ( )filter.svg指定 20px 模糊：Y0 20

<?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其用作替代方案，但找不到任何仅在一个方向上的模糊示例。

4

1 回答 1

-3

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

于 2017-06-27T16:28:08.930 回答