SOURCE

console 命令行工具 X clear

                    
>
console
const washButtons = [...document.querySelectorAll(".wash")]
washButtons.forEach((el) => {
  el.addEventListener("click", (e) => {
    e.preventDefault()
    el.classList.remove("washing")
    void el.offsetWidth; // Magic! : https://css-tricks.com/restart-css-animation/#update-another-javascript-method-to-restart-a-css-animation
    el.classList.add("washing")
  })
})
<div class="container">
  <a href="#" class="wash">
    <span class="counter"></span>
    <span class="hands">
      <div class="effect"></div>
      <div class="effect effectA"></div>
      <div class="effect effectB"></div>
      <i class="fas fa-hands-wash"></i>
    </span>
  </a>
  <p>Wash your hands!</p>
</div>
@keyframes washing {
  0% {
    width: 100%;
    height: 100%;
    font-size: 100%;
  }
  50% {
    width: 120%;
    height: 120%;
    font-size: 120%;
  }
  100% {
    width: 100%;
    height: 100%;
    font-size: 100%;
  }
}

@keyframes washing-effect {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: 0.5;
    transform: scale(1.5);
  }
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;

  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p {
  font-size: 300%;
}

.wash {
  text-decoration: none;
  color: rgb(41, 41, 41);
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

.wash:hover {
  color: rgb(117, 117, 117);
}

.washing {
  color: black;
  animation-name: washing;
  animation-duration: 0.3s;
}

.hands {
  position: relative;
  width: 2em;
  height: 2em;
  font-size: 10em;
}

.effect {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  opacity: 0;
  transform: rotate(deg);
}
.effect:before,
.effect:after {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid red;
  transform: rotate(0deg) translateY(-100px);
}
.effectA:before {
  transform: rotate(72deg) translateY(-100px);
}
.effectA:after {
  transform: rotate(144deg) translateY(-100px);
}
.effectB:before {
  transform: rotate(216deg) translateY(-100px);
}
.effectB:after {
  transform: rotate(288deg) translateY(-100px);
}

.washing .effect,
.washing .effectA,
.washing .effectB {
  animation-name: washing-effect;
  animation-duration: 0.3s;
}

.counter {
}

本项目引用的自定义外部资源