CSS对图片添加水波纹效果

最新推荐文章于 2024-08-20 08:33:57 发布

原创最新推荐文章于 2024-08-20 08:33:57 发布 · 672 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

文章展示了如何使用SVG的feTurbulence和feDisplacementMap过滤器创建动画效果，通过对baseFrequency的动画控制，使图像产生波动，创建出一种动态的图像处理视觉体验。

效果：在这里插入图片描述
img: http://zhouyi.run:5222/api/public/admin/getFiles?id=ae6b1db1ed25bc38c266e1449120e87b.gif&&mimetype=image/gif

代码：

    <svg style="display: none">
      <filter id="custom">
        <feTurbulence type="turbulence" baseFrequency="0.01 0.003">
          <animate
              attributeName="baseFrequency"
              from="0.01 0.003"
              to="0.01 0.05"
              dur="8s"
              repeatCount="indefinite"
          ></animate>
        </feTurbulence>
        <feDisplacementMap in="SourceGraphic" scale="20"></feDisplacementMap>
      </filter>
    </svg>
    <img height="300" style="filter: url(#custom)" src="http://www.zhouyi.run:3001/api/v1/files/preview?p=%E5%A3%81%E7%BA%B8-4.jpg&&mimetype=image/jpeg">