实现悬浮卡片层叠展开的核心是利用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结构：
<div class="card-container"> <div class="card">卡片1</div> <div class="card">卡片2</div> <div class="card">卡片3</div> <div class="card">卡片4</div> </div>
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
的值来改变扇形展开的范围。
