CSS对图片添加水波纹效果

最新推荐文章于 2024-01-17 21:30:00 发布

书中枫叶

最新推荐文章于 2024-01-17 21:30:00 发布

阅读量410

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/html0010/article/details/130179751

版权

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