CSS悬浮卡片层叠展开效果详解

大家好，我们又见面了啊~本文《CSS悬浮卡片层叠展开效果实现》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

实现悬浮卡片层叠展开的核心是利用transform和transition属性，通过设置transform实现位移与旋转，transition实现过渡动画，transition-delay控制延迟，从而在:hover时使卡片依次展开；1. 使用position: absolute将卡片堆叠在容器中；2. 为.card添加transition: transform 0.5s ease实现平滑动画；3. 在.card-container:hover下，通过:nth-child选择器为每张卡片设置不同的transform: translate(x, y) rotate(角度)以实现层叠位移与旋转；4. 设置transition-delay递增（如0s、0.1s、0.2s）实现逐张展开效果；5. 调整translate的x、y值和rotate的正负角度可控制展开方向；6. 鼠标移出后，因transition存在，卡片会自动平滑收回；7. 对于多卡片场景，可使用CSS预处理器结合calc()和CSS变量动态计算transition-delay；8. 实现扇形展开时，需设置transform-origin为底部中心，并通过数学计算每个卡片的旋转角度，结合rotate()和transition-delay完成扇形动画；该方案完整支持展开、收回、方向调整及复杂动画，最终效果流畅自然。

CSS制作悬浮卡片层叠展开，核心在于利用transform属性控制卡片的位移和旋转，并结合transition属性实现平滑的过渡效果。延迟效果则通过调整transition-delay属性来实现。

解决方案

首先，我们需要一个包含多个卡片的容器。这些卡片最初堆叠在一起，当鼠标悬浮在容器上时，它们会以层叠的方式展开。

HTML结构：

  
卡片1
  
卡片2
  
卡片3
  
卡片4

CSS样式：

.card-container {
  position: relative;
  width: 200px;
  height: 150px;
  margin: 50px;
}

.card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #eee;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  transition: transform 0.5s ease; /* 添加过渡效果 */
}

.card-container:hover .card:nth-child(1) {
  transform: translate(20px, -20px) rotate(-5deg);
  transition-delay: 0s;
}

.card-container:hover .card:nth-child(2) {
  transform: translate(40px, -40px) rotate(-10deg);
  transition-delay: 0.1s;
}

.card-container:hover .card:nth-child(3) {
  transform: translate(60px, -60px) rotate(-15deg);
  transition-delay: 0.2s;
}

.card-container:hover .card:nth-child(4) {
  transform: translate(80px, -80px) rotate(-20deg);
  transition-delay: 0.3s;
}

解释：

• .card-container：作为卡片的父容器，设置position: relative，以便卡片使用绝对定位。
• .card：设置position: absolute，使所有卡片初始时堆叠在一起。 transition: transform 0.5s ease; 是关键，它定义了transform属性变化的过渡效果，持续时间0.5秒，缓动函数为ease。
• :hover状态下的.card：使用transform: translate(x, y) rotate(角度)来移动和旋转卡片。 transition-delay属性为每个卡片设置不同的延迟时间，从而实现层叠展开的效果。 nth-child选择器用于选择不同的卡片，并为它们设置不同的transform和transition-delay值。

如何调整卡片展开的方向和角度？

通过修改transform属性中的translate和rotate值来调整。translate(x, y)控制卡片的位移，x值越大，卡片向右移动越多；y值越大，卡片向下移动越多。rotate(角度)控制卡片的旋转角度，正值表示顺时针旋转，负值表示逆时针旋转。 例如，要让卡片向左上方展开，可以减小x值，增大y值，并使用负角度。

如何让卡片在鼠标移开后平滑收回？

只需要在.card类中添加transition属性即可。当鼠标移开时，卡片会平滑地回到初始位置。 确保所有卡片都设置了transition属性，这样它们在展开和收回时都会有平滑的过渡效果。

如果卡片数量很多，手动设置transition-delay会很麻烦，有什么更简洁的方法？

可以使用CSS变量和calc()函数来动态计算transition-delay。

.card-container {
  --card-count: 4; /* 卡片总数 */
}

.card {
  transition: transform 0.5s ease, opacity 0.3s ease; /* 添加过渡效果 */
  opacity: 1;
}

.card-container:hover .card {
  transform: translate(20px, -20px) rotate(-5deg); /* 统一的展开效果 */
}

@for $i from 1 through 4 {
  .card-container:hover .card:nth-child(#{$i}) {
    transition-delay: calc(#{$i} * 0.1s); /* 动态计算延迟时间 */
  }
}

在这个例子中，我们使用CSS变量--card-count来存储卡片总数。然后，使用calc()函数和nth-child选择器来动态计算每个卡片的transition-delay。 这样，即使卡片数量发生变化，也只需要修改--card-count的值即可。 这种方式适用于Sass或Less等CSS预处理器。如果使用原生CSS，则需要手动编写每个nth-child选择器的样式。

如何实现更复杂的展开效果，例如扇形展开？

扇形展开需要更复杂的transform变换，包括旋转和缩放。关键在于精确计算每个卡片的旋转角度和缩放比例。

.card-container {
  width: 200px;
  height: 150px;
  position: relative;
}

.card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #eee;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  transform-origin: bottom center; /* 设置旋转中心 */
  transition: transform 0.5s ease, opacity 0.3s ease;
  opacity: 1;
}

.card-container:hover .card {
  opacity: 1;
}

$card-count: 4;
$angle-step: 90deg / ($card-count - 1); /* 计算每个卡片的旋转角度 */

@for $i from 1 through $card-count {
  .card-container:hover .card:nth-child(#{$i}) {
    transform: rotate(($i - 1) * $angle-step);
    transition-delay: calc(#{$i} * 0.05s);
  }
}

解释：

• transform-origin: bottom center;：设置旋转中心为卡片的底部中心。
• $angle-step：计算每个卡片的旋转角度，这里假设总共展开90度。
• 在:hover状态下，使用rotate()函数旋转每个卡片，并使用transition-delay实现层叠效果。

这种方法需要一些数学计算，以确保卡片以正确的角度展开。可以根据需要调整$angle-step的值来改变扇形展开的范围。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。