Анимация крафта значка как в steam

Question

Подскажите как реализовать так, что при кнопки откр модальное окно, с анимацией желательно чтобы крутились карточки (сами карточки это div). Самое главное это анимация. Буду благодарен

Видео пример https://disk.yandex.ru/i/_VAvop7dsABeAQ

Answer 1

± похожий вариант на CSS.

body {
  height: 100vh;
  overflow: hidden;
}

.block {
  width: 200px;
  height: 300px;
  border-radius: 10px;
  background: #ccc;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.card {
  display: block;
  width: 100px;
  height: 140px;
  border-radius: 6px;
  background: #333;
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 130%;
  transform: translate(-50%, -130%) rotate(35deg);
  opacity: 0;
  animation: Anim 4s linear forwards;
}

.card:nth-child(1) {animation-delay:   0s; z-index: 1;}
.card:nth-child(2) {animation-delay: 0.6s; z-index: 2;}
.card:nth-child(3) {animation-delay: 1.2s; z-index: 3;}
.card:nth-child(4) {animation-delay: 1.8s; z-index: 4;}
.card:nth-child(5) {animation-delay: 2.4s; z-index: 5;}
.card:nth-child(6) {animation-delay: 3.0s; z-index: 6;}

@keyframes Anim {
  0%, 90%, 100% {opacity: 0;}
  15%, 90% {opacity: 1;}

  0% {transform: translate(-50%, -130%) rotate(35deg);}
  10% {transform: translate(-50%, -125%) rotate(0deg);}
  90%, 100% {transform: translate(-50%, -125%) rotate(-360deg);}
}

<div class="block">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

БЛОГ НА HUSL

Анимация крафта значка как в steam

Ответы (1 шт):