js实现照片中的水面波动效果-html代码-BFW代码库

js实现照片中的水面波动效果

代码语言：html

所属分类：动画

代码描述：js实现照片中的水面波动效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  background: #cfcfcf;
}

#container, #water {
  background-image: url("http://repo.bfw.wiki/bfwrepo/image/5ee9f6f685b56.png");
  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;
  -webkit-filter: blur(30px);
          filter: blur(30px);
}
#container #water {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 66%;
  -webkit-filter: url("#turbulence");
          filter: url("#turbulence");
  overflow: hidden;
}


</style>

</head>
<body translate="no">
<div id="container">
<div id="water"></div>
</div>
<svg xlmns="http://www.w3.org/2000/svg".........完整代码请登录后点击上方下载按钮下载查看