bin-ui/src/styles/common/waves.styl

基于 vue2.6 / vue-cli3 的 UI 组件库

.waves-ripple {
  position: absolute;
  border-radius: 100%;
  background-color: rgba(255, 255, 255, 0.15);
  background-clip: padding-box;
  pointer-events: none;
  user-select: none;
  transform: scale3d(0, 0, 0);
  opacity: 1;
}

.waves-ripple.z-active {
  opacity: 0;
  transform: scale3d(2, 2, 2);
  transition: opacity 0.8s ease-out, transform .6s ease-out;
}
html {
  --bin-wave-shadow-color: #1089ff;
}
.bin-click-animating-node {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--bin-wave-shadow-color);
  opacity: .4;
  animation: fadeEffect 1.2s cubic-bezier(0.08, 0.82, 0.17, 1), waveEffect 0.8s cubic-bezier(0.08, 0.82, 0.17, 1);
  animation-fill-mode: backwards;
  pointer-events: none;
}

@keyframes fadeEffect {
  100% {
    opacity: 0;
  }
}
@keyframes waveEffect {
  100% {
    box-shadow: 0 0 0 6px var(--bin-wave-shadow-color);
  }
}