CSS 一行代码让任意元素有加速度！

苏武难飞
1,378 阅读4分钟

起因

最近在学习SVG滤镜的使用总结了几个使用SVG滤镜比较惊艳的效果，分享给大家。

什么是加速感🚀

在真实世界中，当物体快速移动时，人眼或相机无法清晰捕捉到物体的每个细节，因此会产生一种运动模糊的效果。这种视觉现象让大脑误认为物体正在快速移动，从而产生“加速感”。

原理

  1. 运动模糊：当物体以高速度运动时，光线到达视觉器官（如眼睛或相机）的时间存在滞后性。这会导致在某个时间窗口内，物体在多个位置留下痕迹。这种现象会让物体看起来模糊，尤其是在速度方向上。快速移动的物体模糊程度越高。

  2. 加速感的产生：模糊效果（如 blur 滤镜或 motion blur）通过在物体周围创建模糊的边缘，模拟物体在短时间内的运动轨迹。由于我们的视觉系统习惯于将模糊与运动联系起来，因此看到模糊的物体时，大脑会下意识地认为物体在加速或快速移动。

    这种效果通过以下机制增强加速感：

  • 视觉焦点：人眼会更容易注意到清晰的静止物体，而模糊的物体则给人一种动态感。通过添加模糊效果，可以模拟出物体“运动”时的动态感，从而让观察者感觉到物体正在加速或快速移动。
  • 时间感知：物体的模糊与现实世界中快速移动物体的模糊相匹配，视觉与大脑结合起来，会使物体显得更快。这也可以解释为什么运动模糊经常用于电影或视频游戏中的高速场景，以增强动作的动感和速度感。

重点要关注这句 加速感的产生：模糊效果 一般来说速度越快的物体给人眼的模糊效果越强！

原理我们已经了解到了，接下来就准备动手！

CSS滤镜的局限性

了解过加速感的原理后我们知道产生加速感最重要的特性是模糊，而想到模糊效果自然会想到filter: blur，我们的原图如下

01.jpg

加上filter: blur(6px)

 img {
     width: 600px;
     height: 400px;
     filter: blur(6px);
    }

02.png

可以发现和我们想象中的加速感只能说完全不一样！！！原因在于filter: blur的滤镜效果在图像的两个方向(x和y)均匀应用，但是我们想要的加速感其实只需要在x轴或y轴上应用，面对这种需求CSS滤镜就有点束手无策了。

SVG滤镜闪亮登场

关于SVG滤镜的使用之前我也写过两篇博客，感兴趣的朋友可以去看看。

和CSS filter:blur对应的SVG滤镜是feGaussianBlur，使用起来也是非常简单

<svg>
    <defs>
        <filter id="blur">
            <feGaussianBlur stdDeviation="6 0"/>
        </filter>
    </defs>
</svg>

feGaussianBlur

该滤镜对输入图像进行高斯模糊，属性stdDeviation中指定的数量定义了钟形。

先来个简单的例子！🌰

    img {
            width: 600px;
            height: 400px;
            filter: url(#blur);
    }



    <body>

    <img src="../img/07.jpg">

    <svg>

        <defs>
            <filter id="blur">
                <feGaussianBlur stdDeviation="6"/>
            </filter>
        </defs>

    </svg>

    </body>

效果如下

02.png

可以发现和使用CSS滤镜的效果一样，但是feGaussianBlur的stdDeviation是支持两个参数的也就是支持单独设置x和y轴上的数值！

调整之后如下

05.png

可以发现调整之后图1的加速感是不是一下就出来了！

实际应用，惊艳你的同事🍖

利用这个特性我们其实可以给许多原本只有位移效果元素加上，体验立马起飞！举一个数字切换的效果例子~

可以看到只是一个平平无奇的数字递增效果，如果我们运用上述的小技巧给.right加上SVG滤镜再来看看！

<svg class="svgFilter" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="blurFilter">
            <feGaussianBlur id="blurFilterItem" in="SourceGraphic" stdDeviation="13,0" />
        </filter>
    </defs>
</svg>

这个效果怎么样！( •̀ ω •́ )✧，灵活运用feGaussianBlur可以提升很多效果！希望看到这的朋友点个赞赞叭~

结语

英雄登场未晚，豪杰何惧来迟！

参考资料

A Motion Blurred Number with CSS / SVG / JS

SVG Filters

avatar
文章
阅读
粉丝