<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 SVG图片添加紊流（feTurbulence）滤镜动画特效</title>
<style>
body {
background: #cfcfcf;
}
#container,
#water {
background-image: url("images/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("images/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>
<script src="js/jquery-1.11.1.min.js"></script>
<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>
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>
</body>
</html>
HTML5 SVG基于图片紊流滤镜实现的水面波纹动画特效源码.zip
版权申诉
196 浏览量
2022-11-03
23:37:58
上传
评论
收藏 148KB ZIP 举报
HTML5 SVG基于图片紊流滤镜实现的水面波纹动画特效源码.zip （5个子文件） 
132689862547963453 images 
avatar.jpg 34KB lake.jpg 60KB
index.html 3KB js 
jquery-1.11.1.min.js 94KB TweenMax.min.js 96KB资源评论
