返回

纸牌魔术，让你成为聚焦的英雄

前端

用CSS实现卡牌的发牌和翻转动画，让聚光灯聚焦于你！

各位牌友，准备好了吗？今天，我们将踏上一场CSS之旅，学习如何让卡牌在网页上灵动飞舞，成为你下一场牌局的点睛之笔。无论是炫耀你的珍藏卡牌，还是为游戏之夜增添一丝趣味，这个教程将循序渐进地引导你完成卡牌发牌和翻转动画的制作。

打造卡牌画布

首先，我们用HTML勾勒出卡牌舞台：一个div元素作为卡牌容器，一个button元素作为发牌按钮。

<div id="card-container"></div>
<button id="deal-button">发牌</button>

定义卡牌样式

现在，是时候为卡牌穿上合适的衣裳了。CSS负责设置卡牌尺寸、背景颜色和背面图案。

#card-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  width: 100px;
  height: 150px;
  background-color: #ffffff;
  background-image: url("card-back.png");
  background-size: cover;
  margin: 10px;
  transition: transform 0.5s ease-in-out;
}

发牌动画的奥秘

接下来，我们给卡牌注入灵魂，让它们从天而降。CSS的animation属性将赋予它们飞舞的魔法。

@keyframes deal-card {
  0% {
    transform: translate3d(-50%, -50%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

.card.dealing {
  animation: deal-card 0.5s ease-in-out;
}

卡牌翻转的艺术

最后，让我们见证卡牌翻转的精彩时刻。CSS的transform属性再次发挥作用。

@keyframes flip-card {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}

.card.flipping {
  animation: flip-card 0.5s ease-in-out;
}

JavaScript的掌控力

现在，是时候让JavaScript掌舵，控制动画的节奏。当发牌按钮被点击时，JavaScript会启动发牌和翻转动画。

const dealButton = document.getElementById("deal-button");
const cardContainer = document.getElementById("card-container");

dealButton.addEventListener("click", () => {
  // 发牌动画
  const cards = document.querySelectorAll(".card");
  cards.forEach((card) => {
    card.classList.add("dealing");
    setTimeout(() => {
      card.classList.remove("dealing");
    }, 500);
  });

  // 翻转动画
  setTimeout(() => {
    cards.forEach((card) => {
      card.classList.add("flipping");
      setTimeout(() => {
        card.classList.remove("flipping");
      }, 500);
    });
  }, 500);
});

结论

恭喜你，已经掌握了用CSS实现卡牌发牌和翻转动画的秘诀！现在，尽情享受卡牌游戏的乐趣，让你的下一场牌局成为一场视觉盛宴吧。

常见问题解答

  1. 如何自定义卡牌背面图案？

    • 在card-back.png的URL处，替换为你的自定义图案即可。

  2. 如何更改发牌速度？

    • 在@keyframes deal-card中调整动画持续时间，例如animation: deal-card 0.7s ease-in-out;。

  3. 如何让卡牌以叠加方式发牌？

    • 在#card-container的display属性中添加flex-direction: column;。

  4. 如何触发卡牌翻转后执行其他动作？

    • 在@keyframes flip-card的100%关键帧中，使用animation-end事件监听器触发其他函数。

  5. 如何让翻转后的卡牌保持正面朝上？

    • 在@keyframes flip-card中将100%关键帧的transform更改为rotateY(360deg);。