CSS对图片添加水波纹效果

书中枫叶

于 2023-04-16 10:34:33 发布

阅读量590

点赞数

CC 4.0 BY-SA版权

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/html0010/article/details/130179751

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：在这里插入图片描述
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">