粘性水滴加载效果-html代码-BFW代码库

粘性水滴加载效果

代码语言：html

代码描述：粘性水滴加载效果

代码标签：效果

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


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

<style>
body {
  background: linear-gradient(135deg, #3B2667 10%, #BC78EC 100%) no-repeat;
  margin: 0;
  height: 100%;
  background-attachment: fixed;
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes grow {
  0%, 15%, 100% {
    transform: scale(1);
  }
  5% {
    transform: scale(1.2);
  }
}
.wrapper {
  position: relative;
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  margin: 5em auto 0;
  filter: url("#goo");
}
.wrapper > * {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3rem;
  height: 3rem;
  margin: -1.5rem;
}
.wrapper > *:nth-of-type(1) {
  transform: rotate(0deg) translate(7.5rem) rotate(0deg);
}
.wrapper > *:nth-of-type(1) > .bubble {
  animation: grow 4s ease infinite;
  animation-delay: -0.1s;
}
.wrapper > *:nth-of-type(2) {
  transform: rotate(45deg) translate(7.5rem) rotate(-45deg);
}
.wrapper > *:nth-of-type(2) > .bubble {
  animation: grow 4s ease infinite;
  animation-delay: 0.4s;
}
.wrapper > *:nth-of-type(3) {
  transform: rotate(90deg) translate(7.5rem) rotate(-90deg);
}
.wrapper > *:nth-of-type(3) > .bubble {
  animation: grow 4s ease infinite;
  animation-delay: 0.9s;
}
.wrapper > *:nth-of-type(4) {
  transform: rotate(135deg) translate(7.5rem) rotate(-135deg);
}
.wrapper > *:nth-of-type(4) > .bubble {
  animation: grow 4s ease infinite;
  animation-delay: 1.4s;
}
.wrapper > *:nth-of-type(5) {
  transform: rotate(180deg) translate(7.5rem) rotate(-180deg);
}
.wrapper > *:nth-of-type(5) > .bubble {
  animation: grow 4s ease infinite;
  animation-delay: 1.9s;
}
.wrapper > *:nth-of-type(6) {
  transform: rotate(225deg) translate(7.5rem) rotate(-225deg);
}
.wrapper > *:nth-of-type(6) > .bubble {
  animation: grow 4s ease infinite;
  animation-delay: 2.4s;
}
.wrapper > *:nth-of-type(7) {
  transform: rotate(270deg) translate(7.5rem) rotate(-270deg);
}
.wrapper > *:nth-of-type(7) > .bubble {
  animatio.........完整代码请登录后点击上方下载按钮下载查看