불을 켜자 🔥 .

이전 게시물에서 웨이브 👋 이모티콘과 함께 애니메이션을 사용하는 것이 얼마나 놀라운지 보았습니다! 이번 포스트에서는 불꽃 🔥 이모티콘도 동일하게 달성하도록 노력하겠습니다!

아래는 CSS 코드입니다.

:root {
  --flame-size: 100;
}

@keyframes flame-animation {
  0%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.75) rotate(0) scale(1);
  }
  25% {
    opacity: 0.35;
    transform: translate3d(0, -10%, 0) scale(1) rotate(-3deg) scale(1.05);
  }
  50% {
    opacity: 0.35;
    transform: translate3d(0, -4%, 0) scale(1) rotate(3deg) scale(1.1);
  }
  75% {
    opacity: 0.35;
    transform: translate3d(0, -20%, 0) scale(1) rotate(-3deg) scale(1.05);
  }
  99% {
    opacity: 0;
    transform: translate3d(0, -50%, 0) scale(0.8) rotate(0) scale(1);
  }
}

.fire {
  position: relative;
  display: inline-block;
}

.flame {
  position: absolute;
  transform-origin: 70% 70%;
  z-index: 2;
  display: inline-block;
  top: calc(var(--flame-size) * -1px);
}

.flame.animate {
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  animation-name: flame-animation;
  opacity: 0;
  z-index: 1;
  transform: translate3d(0, 15px, 0) scale(0.75) rotate(0);
  z-index: 1;
  animation-timing-function: ease-in;
}

.flame.animate:nth-child(2) {
  animation-delay: 0.5s;
}
.flame.animate:nth-child(3) {
  animation-delay: 1s;
}

HTML은 다음과 같습니다.

<div class="container">
  <p>
    Light up
    <span class="fire">
      <span class="flame base">🔥</span>
      <span class="flame animate">🔥</span>
      <span class="flame animate">🔥</span>
      <span class="flame animate">🔥</span>
    </span>
  </p>
</div>

아래 codepen에서 위 코드의 출력을 볼 수도 있습니다.



위의 이미지가 실제 불꽃처럼 보이지 않는다는 것을 알고 있지만 적어도 시작하는 것이 좋다고 생각합니다!

의견 섹션에서 귀하의 생각과 피드백을 알려주십시오.

즐거운 코딩!!!

🌲 🌞 😊