gsap+svg实现水滴落下溅开动画效果代码-html代码-BFW代码库

gsap+svg实现水滴落下溅开动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+svg实现水滴落下溅开动画效果代码，落到按钮上四处飞溅效果。

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
  
  
<style>
body {
  font-family: Avenir, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: #ffefc2;
}

.drip,
.splash {
  stroke: #2e848c;
  fill: #40aeb8;
}

button {
  font-size: 1.5rem;
  padding: 0.5rem 2rem;
  border-radius: 5px;
  border: none;
  background-color: #fcca00;
  cursor: pointer;
}

button:hover {
  background-color: #dbb104;
}
</style>


  
  
</head>

<body translate="no">
  <svg height="260" width="100" xmlns="http://www.w3.org/2000/svg">
  <path class="drip" d="M40,55C40,50,50,35,50,35s10,15,10,20S55,65,50,65S40,60,40,55z" />
  <path class="drip" d="M40,55C40,50,50,35,50,35s10,15,10,20S55,65,50,65S40,60,40,55z" />
  <path class="drip" d="M40,55C40,50,50,35,50,35s10,15,10,20S55,65,50,65S40,60,40,55z" />
  <path class="drip" d="M40,55C40,50,50,35,50,35s10,15,10,20S55,65,50,65S40,60,40,55z" />
  <path class="drip" d="M40,55C40,50,50,35,50,35s10,15,10,20S55,65,50,65S40,60,40,55z" />
  <circle class="splash" id="s1" r="6" cx="50" cy="260" />
  <circle class="splash" id="s2" r="6" cx="50" cy="260" />
  <circle class="splash" id="s3&q.........完整代码请登录后点击上方下载按钮下载查看