SVG动态滤镜实现水面波动效果

本文将介绍如何利用SVG的滤镜功能来模拟水面波动的效果。通过结合HTML、CSS以及Javascript，我们可以创建出既美观又实用的动态视觉效果。

示例图片

HTML 结构

首先，我们需要定义基本的HTML结构，其中包含了一个用于展示水面效果的容器和一个SVG滤镜元素。

 
  查看作者主页

CSS 样式

接下来，我们为这些元素添加样式，确保它们在页面上正确显示。

body { background: #cfcfcf; } #container, #water { background-image: url('http://www.seanalexanderfree.com/codepen/lake/lake.jpg'); background-position: center bottom; } #container { position: absolute; top: calc(50% - 206px); left: calc(50% - 275px); height: 412px; width: 550px; } #container:after { position: absolute; top: 10%; left: 2.5%; z-index: -1; content: ''; display: block; height: 95%; width: 95%; background: #0f0f0f; filter: blur(30px); } #water { position: absolute; bottom: 0; width: 100%; height: 66%; filter: url('#turbulence'); overflow: hidden; } #codepen-link { position: absolute; bottom: 30px; right: 30px; height: 40px; width: 40px; z-index: 10; border-radius: 50%; box-sizing: border-box; background-image: url('http://www.seanalexanderfree.com/codepen/avatar.jpg'); background-position: center center; background-size: cover; opacity: 0.5; transition: all 0.25s; } #codepen-link:hover { opacity: 0.8; box-shadow: 0 0 6px #0c0c0c; }

Javascript 动画

最后，使用Javascript来控制滤镜中的参数，以实现动态变化的效果。

var timeline = new TimelineMax({ repeat: -1, yoyo: true }), feTurb = document.querySelector('#feturbulence'); timeline.add(TweenMax.to(feTurb, 8, { onUpdate: function () { var bfX = this.progress() * 0.005 + 0.015, // base frequency x bfY = this.progress() * 0.05 + 0.1, // base frequency y bfStr = bfX.toString() + ' ' + bfY.toString(); // base frequency string feTurb.setAttribute('baseFrequency', bfStr); } }), 0);

您可以在CodePen上在线预览此效果。

原文链接：点击这里