水滴融合动画效果-html代码-BFW代码库

水滴融合动画效果

代码语言：html

所属分类：动画

代码描述：水滴融合动画效果，利用gsap制作

代码标签：效果

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

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

<style>
html, body {
  background-image: url("http://repo.bfw.wiki/bfwrepo/image/5e965c146a2fc.png");
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: #eaeaea;
}

#instructions {
  position: absolute;
  width: 100%;
  font-family: "Helvetica", sans-serif;
  text-align: center;
  font-size: 12px;
  top: 55px;
  opacity: .5;
}

canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-filter: url("#shadowed-goo");
          filter: url("#shadowed-goo");
}

#texture {
  position: absolute;
  background-image: url("http://repo.bfw.wiki/bfwrepo/image/5e965c146a2fc.png");
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  mix-blend-mode: hard-light;
}
</style>

</head>
<body translate="no">
<canvas></canvas>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="shadowed-goo">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="5" />
<feColorMatrix in="blur" mode=&quo.........完整代码请登录后点击上方下载按钮下载查看