hongbo-miao/hongbomiao.com

View on GitHub
web/src/shared/components/Sparkle.module.css

Summary

Maintainability
Test Coverage
.hmWrapper {
  position: absolute;
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .hmWrapper {
    animation: hmComeInOut 700ms forwards;
  }
}

@keyframes hmComeInOut {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

.hmSparkle {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .hmSparkle {
    animation: hmSpin 1000ms linear;
  }
}

@keyframes hmSpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(180deg);
  }
}