CSS效果之橡皮泥效果

代码来自 https://github.com/Aaronliu2016/css-tricks

<!-- run -->
<style>
.bg{
  width:500px;
 height:500px;
}
.cubes {
  filter: url(#goo);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  --cube-size: 100px;
  --cube-max: 65px;
  --cube-min: -65px;
}

.cube {
  position: absolute;
  background: #42b983;
  width: var(--cube-size);
  height: var(--cube-size);
  left: 50%;
  top: 50%;
  border-radius: calc(var(--cube-size)/4);
  animation: cube-left-top-anim cubic-bezier(0.75, 0, 0.175, 1) 4s infinite;
}

@keyframes cube-left-top-anim {
  0% {
    transform: scale(1.1) translate(0, 0);
  }
  33% {
    transform: scale(0.9) translate(var(--cube-min), 0);
  }
  62% {
    transform: scale(0.7) translate(var(--cube-min), var(--cube-min));
  }
  94% {
    transform: scale(1.1) translate(0, 0);
  }
}

.cube:nth-child(2) {
  animation-name: cube-right-top-anim;
}
@keyframes cube-right-top-anim {
  0% {
    transform: scale(1.1) translate(0, 0);
  }
  33% {
    transform: scale(0.9) translate(var(--cube-max), 0);
  }
  62% {
    transform: scale(0.7) translate(var(--cube-max), var(--cube-min));
  }
  94% {
    transform: scale(1.1) translate(0, 0);
  }
}

.cube:nth-child(3) {
  animation-name: cube-left-bottom-anim;
}
@keyframes cube-left-bottom-anim {
  0% {
    transform: scale(1.1) translate(0, 0);
  }
  33% {
    transform: scale(0.9) translate(var(--cube-min), 0);
  }
  66% {
    transform: scale(0.7) translate(var(--cube-min), var(--cube-max));
  }
  98% {
    transform: scale(1.1) translate(0, 0);
  }
}

.cube:nth-child(4) {
  animation-name: cube-right-bottom-anim;
}
@keyframes cube-right-bottom-anim {
  0% {
    transform: scale(1.1) translate(0, 0);
  }
  33% {
    transform: scale(0.9) translate(var(--cube-max), 0);
  }
  68% {
    transform: scale(0.7) translate(var(--cube-max), var(--cube-max));
  }
  100% {
    transform: scale(1.1) translate(0, 0);
  }
}
</style>
<div class="bg">
<div class="cubes">
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
  </div>
  <svg>
    <defs>
      <filter id="goo">
        <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
        <feBlend in="SourceGraphic" in2="goo" />
      </filter>
    </defs>
  </svg>
</div>