html5svg逼真水波纹动画特效.zip资源-CSDN文库

共4个文件

jpg：1个

html：1个

js：1个

版权申诉

jQuery特效

CSS特效

网页特效

138 浏览量 2023-10-14 23:59:13 上传评论收藏 55KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

html5 svg逼真水波纹动画特效.zip （4个子文件）

jiaoben7069

TweenMax.min.js 109KB

img

4214.jpg 16KB

css

style.css 729B

index.html 1KB

<!doctype html> <html> <head> <meta charset="utf-8"> <title>html5 svg逼真水波纹动画特效 - 【更多源码：www.96flw.com】</title> <link type="text/css" href="css/style.css" rel="stylesheet" /> </head> <body> <script src="js/TweenMax.min.js"></script> <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> <script> let timeline = new TimelineMax({ repeat: -1, yoyo: true }), feTurb = document.querySelector('#feturbulence'); timeline.add( TweenMax.to(feTurb, 15, { onUpdate: function () { let bfX = this.progress() * 0.005 + 0.015, //base frequency x bfY = this.progress() * 0.05 + 0.1; //base frequency y feTurb.setAttribute('baseFrequency', `${bfX} ${bfY}`); } }), 0);</script> </body> </html>

评论收藏

内容反馈

版权申诉