实现悬浮卡片层叠展开的核心是利用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的值来改变扇形展开的范围。
