css悬停效果_快速提示：如何使用CSS构建简单的堆栈悬停效果

最新推荐文章于 2024-08-16 11:35:31 发布

翻译最新推荐文章于 2024-08-16 11:35:31 发布 · 277 阅读

文章标签：

#定位 #css #html #css3 #js #ViewUI

本文介绍了一种使用CSS创建卡片堆叠悬停效果的方法。通过定义卡片的伪元素并在悬停时改变其位置，可以实现平滑过渡的视觉效果。文章详细解释了如何设置必要的CSS变量和样式。

css悬停效果

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

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

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>
    
    <!-- more cards here -->
  </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变量确定。

还要注意的另一件事是，我们为所有.card-inner元素赋予z-index: 1 ，以便它们始终位于伪元素的顶部。

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

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

创建卡布局所需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 class的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);
}