html+css3实现在图片上水波流动效果，可调节水波流速大小

今天实现利用html5+css3一个在图片上可以展示出水波纹的效果，并且可以调节水波纹流速大小。

效果展示

水波纹涌动

核心代码

<svg width="0" height="0"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
        <filter id="water">
          <feTurbulence type="fractalNoise" baseFrequency=".05 .05" numOctaves="1" result="noise1"></feTurbulence>
            <feColorMatrix in="noise1" type="hueRotate" values="0" result="noise2">
              <animate attributeName="values" from="0" to="360" dur="1s" repeatCount="indefinite"/>
            </feColorMatrix>
          <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="15" in="SourceGraphic" in2="noise2" />
        </filter>
</svg>
<img src="@/assets/img/water.png" class="screenSaver-water"/>

<style lang="less" scoped>
   .water {
      -o-object-fit: cover;
      object-fit: cover;
      -webkit-filter: url(#water);
      filter: url(#water);
   }
</style>

代码解析

<svg>标签实现水波流动的效果，利用scale属性可以设置流速大小，<img>标签设置图片