[CSS] 버튼을 누를 때 폭죽 터지는 animation을 넣어보기

안녕하세요! aloveu입니다.

오늘은 버튼을 누를 때 폭죽 터지는 효과를 줘보려고 합니다.

어디서 본 거 같죠?! ㅋㅋㅋㅋ 네 유튜브에서 좋아요를 눌렀을 때 보이는 그겁니다.

유튜브 좋아요 버튼

따봉은 이미지 구하기 귀찮으니 폭죽만요 ㅋㅋㅋㅋ

일단 하나씩 해봅시다. 

---

1. 폭죽 부분 만들기

점이 동그랗게 퍼지면서 터지는 효과를 보니 왠지 css에 border 에서 dash나 dotted를 쓰면 될 거 같죠?!

<span class="firework"></span>

<style>
.firework {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px dotted red;
  border-radius: 50%;
}
</style>

 

결과

 

오?! 벌써 뭔가 보여요. 그러면 이 원을 커지면서 서서히 사라지게 만들어야합니다.

 

2. Animation 적용

<span class="firework"></span>

<style>
.firework {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px dotted red;
  border-radius: 50%;
  opacity: 0;
  animation: burst 2s forwards;
}

@keyframes burst {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  60%, 90% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.01);
    opacity: 0;
  }
}
</style>

 

animation burst를 추가해서 초기에는 투명한 상태에서 시작하고 2초 동안 burst 애니메이션을 실행하게 합니다.

 

결과

 

뭔가 터지는 것처럼 보이긴 합니다.

 

3. 버튼에 적용하기

이제 버튼을 눌렀을 때 저 폭죽이 터지는 걸 구현해 보겠습니다. 

누를 때마다 저 애니메이션이 실행이 돼야 해요.

<button class="btn-firework" id="fireworkBtn">
  like
  <span class="firework"></span>
</button>

<style>
.firework {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px dotted red;
  border-radius: 50%;
  opacity: 0;
  position: absolute;
}

@keyframes burst {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  60%, 90% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

.btn-firework {
  position: relative;
  cursor: pointer;
  color:#fff;
  background: #000;
  border:0;
  padding: 5px 20px;
  border-radius: 2px;
}

.btn-firework.on .firework {
  animation: burst 2s forwards;
}
</style>

<script type="text/javascript">
const fireworkBtn = document.getElementById('fireworkBtn');

fireworkBtn.addEventListener('click', ()=>{
  fireworkBtn.classList.add('on');

  setTimeout(() => {
    fireworkBtn.classList.remove('on');
  }, 2000);
});
</script>

 

버튼을 추가해주고 버튼 안에 만들어둔 폭죽 엘리먼트를 넣습니다. 그리고 버튼이 눌릴 때 버튼에 class on을 추가해줬다가 애니메이션이 끝나는 2초 후에 on을 remove 시켜주는 스크립트를 넣어줘요.

 

결과

 

버튼을 누르니 폭죽이 터지네요. 

 

4. 최종 결과물

여기까지는 잘 됐으니 이제 폭죽을 몇 개 더 추가해주고 색상도 다양하게 처리해 봅시다.

<button class="btn-firework" id="fireworkBtn">
  like
  <span class="firework"></span>
  <span class="firework"></span>
  <span class="firework"></span>
  <span class="firework"></span>
  <span class="firework"></span>
</button>

<style>
.firework {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px dotted rgb(255, 99, 71);
  border-radius: 50%;
  opacity: 0;
  position: absolute;
}

@keyframes burst {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  60%, 90% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

.btn-firework {
  position: relative;
  cursor: pointer;
  color:#fff;
  background: #000;
  border:0;
  padding: 5px 20px;
  border-radius: 2px;
}
.btn-firework.on .firework {
  animation: burst 2s forwards;
}

.firework:nth-child(1) { 
  top: 25px; 
  left: 2px; 
  animation-delay: 0s; 
}
.firework:nth-child(2) { 
  top: 13px; 
  left: 63px; 
  width: 6px; 
  height: 6px; 
  animation-delay: 0.3s;
  border-color: rgb(50, 205, 50);
}
.firework:nth-child(3) { 
  top: -10px; 
  left: 35px; 
  width: 14px; 
  height: 14px; 
  animation-delay: 0.6s; 
  border-color: rgb(135, 206, 235);
  border-width:4px;
}

.firework:nth-child(4) { 
  top: 5px; 
  left: 12px; 
  width: 11px; 
  height: 11px; 
  animation-delay: 0.4s; 
  border-color: rgb(255, 215, 0);
}

.firework:nth-child(5) { 
  top: -9px; 
  left: -17px; 
  width: 19px; 
  height: 19px; 
  animation-delay: 0.4s; 
  border-color: rgb(218, 112, 214);
  border-width:5px;
}
</style>

<script type="text/javascript">
const fireworkBtn = document.getElementById('fireworkBtn');

fireworkBtn.addEventListener('click', ()=>{
  fireworkBtn.classList.add('on');

  setTimeout(() => {
    fireworkBtn.classList.remove('on');
  }, 3000);
});
</script>

 

결과

 

어때요?! 제가 색상 조합을 못해서 그렇지 ㅋㅋㅋㅋ 그래도 꽤 볼만한 폭죽 터지는 버튼이 만들어졌습니다.

그럼 대충 이제 어떤 식으로 되는지 튜토리얼은 끝났으니 각자 더 디벨롭해보시기 바랍니다. 

그럼 감사합니다. ^___^