水波效果 – 有爱前端

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>#Codevember 08 - Animated SVG Turbulence Filter</title> <META NAME="COPYRIGHT"CONTENT="http://codepen.io/seanfree/pen/eBppyE"> <style type="text/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; overflow: hidden; box-shadow: 0 4px 20px #4f4f4f; } #container #water { position: absolute; bottom: 0; width: 100%; height: 66%; -webkit-filter: url("#turbulence"); filter: url("#turbulence"); } #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; -webkit-transition: all 0.25s; transition: all 0.25s; } #codepen-link:hover { opacity: 0.8; box-shadow: 0 0 6px #0c0c0c; } </style> </head> <body> <div id="container"> <div id="water"></div> </div> <svg xlmns="http://www.w3.org/2000/svg" version="1.1"> <filter id="turbulence" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%"> <feTurbulence id="feturbulence" type="fractalNoise" numOctaves="3" seed="2"></feTurbulence> <feDisplacementMap xChannelSelector="G" yChannelSelector="B" scale="20" in="SourceGraphic"></feDisplacementMap> </filter> </svg><a id="codepen-link" href="http://www.codepen.io/seanfree" target="_blank"></a> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> <script type="text/javascript"> var timeline = new TimelineMax({repeat: -1, yoyo: true}), feTurb = document.querySelector('#feturbulence'); timeline.add( new TweenMax.to(feTurb, 8, { onUpdateParams: [feTurb], //pass the filter element to onUpdate onUpdate: function(fe){ 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 fe.setAttribute('baseFrequency', bfStr); } }), 0 ); </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 水波效果