css显示内容越来越模糊_运动模糊滤镜

运动模糊是指快速运动的物体造成明显的模糊拖动痕迹；

以简单的直线运动为例，运动模糊应该具有两个参数，分别是半径长度和角度；

比如在Sketch中如下：

但是 CSS、Canvas、SVG 的滤镜均不支持运动模糊。

那是不是意味着如果设计师只是对一个很简单的图形使用了Sketch中的运动模糊滤镜，我们在重构时就必须使用图片来实现呢？

答案并不是。

SVG 的高斯模糊滤镜和 CSS 以及 Canvas 的并不太一样；

CSS 和 Canvas 高斯模糊滤镜都只支持一个参数，但是 SVG 中 feGaussianBlur 标签的 stdDeviation 属性却可以有两个参数，分别表示 X 和 Y 轴上的模糊半径；

这就意味着如果把 Y 轴的模糊半径设置为 0，那么是可以模拟出水平直线运动的运动模糊效果的。

.demo0{
    width:165px;
    height:165px;
    border-radius:50%;
    opacity: 0.62;
    background-image: radial-gradient(circle at 50% 50%,#4185FC 35%, #0352DB 91%);
    filter: url("#blur3");
}

.demo1{
    width:256px;
    height:256px;
    background-image:url(../img/lena.jpg);
    background-size:100% 100%;
    background-repeat: no-repeat;
    filter: url("#blur2");
}

另外模拟任意角度的运动模糊效果也是可以的，不过需要进行分层处理，如下：

.layer-reset{
    width:256px;
    height:256px;
    transform: rotate(-45deg);
}
.layer-blur{
    width:100%;
    height:100%;
    filter: url("#blur2");
}
.layer-img{
    width:100%;
    height:100%;
    background-image:url(../img/lena.jpg);
    background-size:100% 100%;
    background-repeat: no-repeat;
    transform: rotate(45deg);
}

feGaussianBlur只能模拟水平或者竖直方向的运动模糊，要想模拟任意角度，就只能对内容进行旋转变换，然后再在最外层进行反向旋转变换还原。

在线示例地址为：https://newbieyoung.github.io/SVG_Learn/filter/demo0.html

在常用滤镜算法以及WebGL实现中曾简单介绍过一个基于 WebGL 的滤镜库 WebGLImageFilter；

作者在实现模糊滤镜也没考虑过运动模糊；

但是我们可以稍作改动来让其支持：

主要改动点为：

• 1、新增第二个参数旋转角度deg；
• 2、当存在旋转角度时参数时，只进行Horizontal的处理；
• 3、对待处理片元向量进行旋转变换；
• 4、迭代次数由 7 次改为 30 次，另外权重函数参考 glfx.js triangleblur 的实现。

迭代次数太小会导致模糊半径较大时出现很明显的分块现象，glfx.js 是另外一个基于 WebGL 的滤镜库。

左侧是Sketch中Motion Blur的滤镜效果，右侧是改动后WebGLImageFilter的blur滤镜的效果，除了对边缘的处理不一样以外，基本没啥区别。

在线示例地址为：https://newbieyoung.github.io/Html_learn/test/demo1.html。

关于运动模糊的内容远不止上边这些那么简单，还有一些很复杂的内容，比如3D场景、其它运动模式等，如果有机会再慢慢折腾吧！