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

问：

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

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

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

img {
    filter: blur(20px);
}

我可以通过添加过渡（）来制作动画，但它只会创建高斯模糊，这不是我想要的效果。语法不支持将模糊限制为一个轴之类的东西。transition: filter 0.2s linearfilter: blur(0 10px);

然后我读到模糊滤镜（以及其他滤镜）实际上只是 SVG 滤镜的简写，如果需要，您可以手动编写。因此，我创建了一个名为 SVG 的 SVG，它仅沿轴（）指定 20px 的模糊：filter.svgY0 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（） 作为的值。另外，我无法对其进行动画处理，因为该值是 URL 而不是数字，因此不起作用。filtertransition

最重要的是，我认为这两种方法在IE9中都不起作用。

那么：有什么方法可以做我想做的事情吗？我已经研究过将其用作替代方案，但找不到任何仅朝一个方向的模糊示例。canvas

css canvas svg-filters 运动模糊

@MichaelMullany：嗯...我试过了，但它似乎什么也没做：.Web 检查器显示正在应用该属性，因此它可以识别该属性，但它对我的图像没有影响。在Firefox中，没有前缀的完全相同的东西可以正常工作（）。您是否有一个示例可以证明这在 WebKit 中有效？-webkit-filter: url(filter.svg#blur);filter: url(filter.svg#blur);

0赞 daGUY 6/11/2014

哦，这很有趣——如果 SVG 在 HTML 中内联定义，它就会起作用。我想我可以做到这一点，但我想知道为什么如果它在外部文件中不起作用？

0赞 daGUY 6/11/2014

啊哈！对于标准属性，URL 是相对的，但对于，它是绝对的。所以它确实可以在 Firefox 和 Safari/Chrome 中工作，但我必须以不同的方式编写路径：和 .现在我到了某个地方......filter-webkit-filterfilter: url(filter.svg#blur);-webkit-filter: url(css/filter.svg#blur);

答：

-3赞 Jeff Klein 6/28/2017 #1

如果我对这个问题理解正确，则可以使用 JQuery 完成。

CSS3 确实有它的局限性，而且它在交互值方面非常有限。

Jquery还增加了跨平台的稳定性。

J奎里

$(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 仅在一个方向上模糊（运动模糊）

CSS blur only in one direction (motion blur)

评论

评论