css 如何做出炉石开卡牌包的效果点击包之后震颤然后炸开然后 5 张牌悬浮

要实现炉石开卡牌包的效果，你可以使用CSS的动画和过渡效果。以下是一种可能的实现方式：

HTML结构：

<div class="card-pack">
  <div class="pack"></div>
  <div class="cards">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</div>

CSS样式：

.card-pack {
  position: relative;
  width: 200px;
  height: 260px;
}

.pack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('pack.png');
  background-size: cover;
  cursor: pointer;
  transition: transform 0.3s;
}

.pack.shake {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

.cards {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s, transform 0.5s;
}

.card {
  width: 30px;
  height: 40px;
  background-color: #ccc;
  border-radius: 5px;
}

.cards.show {
  opacity: 1;
  transform: translateY(0);
}

JavaScript代码：

const pack = document.querySelector('.pack');
const cards = document.querySelector('.cards');

pack.addEventListener('click', () => {
  pack.classList.add('shake');
  setTimeout(() => {
    pack.style.display = 'none';
    cards.classList.add('show');
  }, 500);
});

在上面的代码中，我们通过添加.shake类来实现点击包时的震颤效果。在震颤完成后，我们通过将包的display属性设置为none来隐藏包，然后通过添加.show类来显示卡牌。通过CSS的过渡效果，卡牌会从底部上升并显示出来。

请注意，上述代码中的pack.png是指代卡牌包的背景图片，你需要根据实际情况修改该属性。此外，你还可以对CSS样式进行进一步的调整，以达到更理想的效果。