如何使用 CSS 构建简单的堆栈悬停效果

一种常见的设计模式是有一个卡片容器，下面有其他卡片，从而产生多层堆叠的效果。然后，在悬停状态下，卡片会平滑消失或更改其默认位置。在这个简短的教程中，咱们将学习一种简单的 css 技术来创建这种效果。

像往常一样，让咱们先看看咱们的演示（滚动查看所有示例）：

See the Pen How to Build Simple Stack Hover Effects With CSS by Envato Tuts+ (@tutsplus) on CodePen.

1. 从 html 标记开始

咱们 .card-wrapper将从包含所有卡片的元素开始。

由card类表示的每张卡片都将包含该.card-inner元素。在该元素中，咱们将放置目标卡片的内容：

<div class="card-wrapper">
  <div class="card">
    <div class="card-inner">
      <h3 class="card-title">...</h3>
      <div class="card-body">...</div>
    </div>

    
  </div>

根据咱们想要实现的悬停效果，每个类将收到以下类之一：

card-top-left
card-top-right
card-bottom-left
card-bottom-right
card-diagonal-from-right
card-diagonal-from-left
card-rotate
card-perspective
card-origin

2. 定义样式

准备好标记后，咱们将设置一些 CSS 变量并重置样式：

:root {
  --body-text-color: #5c5957;
  --body-bg-color: #e2d9d5;
  --card-border-color: #e2d9d5;
  --card-bg-color: #fff;
  --offset-before: 8px;
  --offset-after: 16px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  color: var(--body-text-color);
  background: var(--body-bg-color);
}

为了创建堆叠效果，咱们将利用伪元素。对于每张卡片，咱们将定义 ::before和::after伪元素，并将它们相对于父卡片进行绝对定位。

transform接下来，咱们将使用该属性将它们从原来的位置移开。对于演示中的前六个示例，此重新定位的数量将由offset-before和offset-after变量确定。

另一件需要注意的事情是，咱们赋予 z-index: 1 所有 .card-inner 元素以使它们始终位于其伪元素之上。

offset-before这是变量值为 8px 且变量值为 16px时的卡片布局 offset-after：

这是当这些变量的值加倍时的布局：

创建卡片布局所需的 CSS 样式：

/*VARIABLES HERE*/

.card {
  position: relative;
  cursor: pointer;
  max-width: 400px;
  margin: 60px auto;
}

.card::before,
.card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card::before,
.card::after,
.card .card-inner {
  background-color: var(--card-bg-color);
  border: 1px solid var(--card-border-color);
  border-radius: 5px;
  transition: transform 0.3s;
}

.card::before,
.card-inner {
  z-index: 1;
}

.card-inner {
  position: relative;
  padding: 3rem;
}

如前所述，每张卡片都包含第二个类，用于处理其初始偏移以及悬停效果。例如，以下是为包含card-top-left该类的卡片触发的额外规则：

/*CUSTOM VARIABLES HERE*/

.card-top-left::before {
  transform: translate(
    calc(-1 * var(--offset-before)),
    calc(-1 * var(--offset-before))
  );
}

.card-top-left::after {
  transform: translate(
    calc(-1 * var(--offset-after)),
    calc(-1 * var(--offset-after))
  );
}

.card-top-left:hover::before,
.card-top-left:hover::after,
.card-top-left:hover .card-inner {
  transform: translate(calc(-1 * var(--offset-before)), 0);
}