[分享]css3扑克牌展开动画

如果你是一个热衷于网页设计的人，那么你一定不能错过CSS3的魅力和强大功能！特别是其中的扑克牌展开动画效果，它可以让你的网页渐变成一个惊艳的扑克牌手牌界面。.card { : relative; wi...

如果你是一个热衷于网页设计的人，那么你一定不能错过CSS3的魅力和强大功能！特别是其中的扑克牌展开动画效果，它可以让你的网页渐变成一个惊艳的扑克牌手牌界面。

.card {
  position: relative;
  width: 150px;
  height: 220px;
  margin: 50px 0 0 30px;
  font-size: 1.5em;
  font-family: Helvetica, Arial;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  transition: transform 0.5s ease;
  transform-origin: bottom center;
}
.card:first-child {
  margin-left: 0;
}
.card:hover {
  transform: translateY(-100px) rotateX(30deg);
  z-index: 1;
}
.card .top {
  background: #c00;
  border-radius: 10px 10px 0 0;
  height: 30%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform-origin: top center;
  transform: rotateX(0deg);
}
.card .bottom {
  background: #060;
  border-radius: 0 0 10px 10px;
  height: 70%;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  transform-origin: bottom center;
  transform: rotateX(-90deg);
}
.card .top .corner,
.card .bottom .corner {
  background: #fff;
  border-radius: 25px;
  font-size: 0.8em;
  height: 50px;
  margin: -15px 0 0 -50px;
  position: absolute;
  width: 100px;
  top: 50%;
  left: 50%;
  text-align: center;
  padding-top: 15px;
}
.card .top .corner.right,
.card .bottom .corner.right {
  transform: rotate(-180deg);
}
.card .top .corner span,
.card .bottom .corner span {
  display: block;
}
.card .top .rank {
  font-size: 3em;
  position: absolute;
  top: 0;
  left: 10px;
}
.card .bottom .rank {
  font-size: 3em;
  position: absolute;
  bottom: 10px;
  right: 10px;
  transform: rotate(180deg);
}
.card .suit {
  font-size: 5em;
  position: absolute;
  top: 30%;
  left: 50%;
  margin: -35px 0 0 -25px;
  text-align: center;
  width: 50px;
}

代码中可以看到.card的一些基本样式定义，包括宽度、高度、边界圆角、阴影、过度动画等。.card:hover定义了鼠标经过时的transform属性，这是扑克牌“翻开”的关键。.top和.bottom定义了扑克牌的牌面和背面，以及它们的颜色、高度等。.corner定义了在扑克牌四个角上的数字和花色logo，.rank定义了扑克牌的数字，而.suit定义了花色logo，它们都是用CSS创建的。这些CSS样式的设置使得我们可以轻松地将扑克牌效果应用于我们的网页设计当中。

总的来说，CSS3扑克牌展开动画是一种简单而实用的效果，它可以让你的网页看起来更加生动、有趣和有吸引力。不要忘了在你的网站中加入一些CSS3特效，它们可以让你的网页更加翔实和极具表现力！