CSS如何制作悬浮卡片层叠展开？transform过渡延迟-css教程-PHP中文网

CSS如何制作悬浮卡片层叠展开？transform过渡延迟

雪夜

发布： 2025-08-08 13:16:01

原创

797人浏览过

实现悬浮卡片层叠展开的核心是利用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过渡延迟

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)

登录后复制

控制卡片的位移，

登录后复制

值越大，卡片向右移动越多；

登录后复制

值越大，卡片向下移动越多。

rotate(角度)

登录后复制

控制卡片的旋转角度，正值表示顺时针旋转，负值表示逆时针旋转。例如，要让卡片向左上方展开，可以减小

登录后复制

值，增大

登录后复制

值，并使用负角度。

卡拉OK视频制作

卡拉OK视频制作，在几分钟内制作出你的卡拉OK视频

178

查看详情

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

只需要在

.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
```
登录后复制
实现层叠效果。