gsap+css实现树叶上的水珠滑动落下动画效果代码-html代码-BFW代码库

gsap+css实现树叶上的水珠滑动落下动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+css实现树叶上的水珠滑动落下动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
<style>
* {
  margin: 0;
  padding: 0;
}
body {
  font-family: sans-serif;
}
.photo {
  width: 90%;
  margin: 30px auto 0;
  position: relative;
}
.photo img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

.waterdrops {
  width: 6.25%;  /* 50/800 */
  position: absolute;
  border-radius: 50%;
  background-image: linear-gradient(to right bottom, black, black 25%, white);
  mix-blend-mode: overlay;
  box-shadow: 10px 10px 14px rgba(4,0,0,0.3), inset 2px 2px 5px rgba(4,0,0,0.3);
}

.waterdrops::before {
  display: block;
  content: '';
  width: 100%;
  height: 0;
  padding-top: 100%;
}

.waterdrops::after {
  display: block;
  content: '';
  width: 12%; /* 6/50 */
  height: 12%;
  border-radius: 50%;
  position: absolute;
  top: 20%;
  left: 20%;
  background: rgba(255,255,255,0.9);
}

.waterdrops.a {
  top: 60%;
  left: 55%;
}
.waterdrops.b {
  top: 35%;
  left: 35%;
  transform: skew(-10deg, 5deg);
}
.waterdrops.c {
  top: 45%;
  left: 38%;
  width: 5%;  /* 40/800 */
}
.waterdrops.d {
  top: 43%;
  left: 45%;
  width: 3.75% /* 30/800 */
}


.attribution {
  margin-top: 20px;
  font-size: 0.9rem;
}
a {
  text-decoration: none;
}
</style>

  
  


</head>

<body >
  <div class="photo">
  <img src=".........完整代码请登录后点击上方下载按钮下载查看