圆圈水波纹动效（华为充电效果）

圆圈水波纹动效

         

/* before */

.g-contrast {

  position: absolute;

  top: 15%;

  left: 50%;

  transform: translate(-50%, 0);

  z-index: -1;

  filter: contrast(10) hue-rotate(0);

  width: 390rpx;

  height: 385rpx;

  overflow: hidden;

  animation: hueRotate 10s infinite linear;

}

.g-circle {

  position: relative;

  width: 385rpx;

  height: 385rpx;

  box-sizing: border-box;

  filter: blur(8px);

}

.g-circle::after {

  content: "";

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%) rotate(0);

  width: 160px;

  height: 160px;

  background-color: #00ff6f;

  border-radius: 42% 38% 62% 49% / 45%;

  animation: rotate 10s infinite linear;

}

.g-circle::before {

  content: "";

  position: absolute;

  width: 176px;

  height: 176px;

  top: 40%;

  left: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  /* background-color: #000; */

  z-index: 10;

}

@keyframes rotate {

  50% {

    border-radius: 45% / 42% 38% 58% 49%;

  }

  100% {

    transform: translate(-50%, -50%) rotate(720deg);

  }

}

@keyframes moveToTop {

  90% {

    opacity: 1;

  }

  100% {

    opacity: .1;

    transform: translate(-50%, -180px);

  }

}

@keyframes hueRotate {

  100% {

    filter: contrast(15) hue-rotate(360deg);

  }

}

/* end */