css 如何做出炉石开卡牌包的效果点击包之后震颤然后爆炸开来

要实现炉石开卡牌包的效果，可以使用CSS动画和一些JavaScript代码。以下是一个简单的示例：

HTML代码：

<div class="card-pack" onclick="openPack()">
  <div class="wrapper">
    <div class="shaking"></div>
    <div class="explosion"></div>
  </div>
</div>

CSS代码：

.card-pack {
  width: 200px;
  height: 250px;
  background-color: lightgray;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
}

.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  perspective: 600px;
}

.shaking {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url('shaking.png');
  background-repeat: no-repeat;
  background-position: center;
  animation: shaking 0.5s infinite;
}

.explosion {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url('explosion.png');
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  animation: explosion 0.5s forwards;
}

@keyframes shaking {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}

@keyframes explosion {
  0% { opacity: 0; transform: scale(0); }
  50% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}

JavaScript代码：

function openPack() {
  var explosionElement = document.querySelector('.explosion');
  explosionElement.style.opacity = 1;
}

在上面的代码中，首先定义了一个card-pack类的div元素作为卡牌包的容器。在容器内部创建了一个wrapper类的div元素，用于包裹震颤和爆炸效果的div元素。shaking类和explosion类分别用于定义震颤和爆炸的样式。使用CSS的animation属性来定义震颤和爆炸的动画效果。

在JavaScript代码中，openPack()函数用于触发爆炸效果。通过获取explosion类的元素，然后将其透明度设置为1，从而显示爆炸效果。

请注意，上述代码只是一个示例，实际效果可能需要根据具体的需求进行调整和修改。另外，你需要准备相应的震颤和爆炸的图片，并将其替换到代码中的shaking.png和explosion.png的URL中。