Glassmorphism 卡片悬停效果

Glassmorphism 是一种 UI 设计趋势，灵感来自毛玻璃的效果，使 UI 元素看起来像是半透明的玻璃，同时保留了元素的深度和立体感。在这里，我们来介绍如何实现 Glassmorphism 卡片悬停效果。

效果演示

在开始之前，我们先来看一下最终实现的效果：

鼠标悬停在卡片上时，卡片会产生一个微妙的变化，看起来非常漂亮和现代化。

实现步骤

HTML 结构

在 HTML 中，我们需要创建一个 div 元素并在其中包含卡片的所有内容，例如标题和图片。此外，我们还需要创建一个子 div 元素，用于实现 hover 效果。

<div class="card">
  <div class="card-inner">
    <h2>Card Title</h2>
    <img src="https://via.placeholder.com/150" alt="Card Image" />
  </div>
</div>

在这里，我们创建了一个 class 名为 card 的父 div，以及一个 class 名为 card-inner 的子 div。

CSS 样式

在 CSS 中，我们将为卡片、卡片内部、以及悬停效果创建不同的样式。

首先，我们需要为卡片设置样式，使其看起来像 Glassmorphism 效果。我们使用 box-shadow 属性来模拟玻璃的效果，并且设置卡片的背景色和边框：

.card {
  width: 300px;
  height: 400px;
  background-color: rgba(255, 255, 255, .2);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .1);
  overflow: hidden;
  position: relative;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, .5),
              -20px -20px 50px rgba(255, 255, 255, .2);
}

接下来，我们需要为卡片内部设置样式。在这里，我们设置用于标题和图像的间距、边框，以及添加 padding：

.card-inner {
  padding: 15px;
}

.card-inner h2 {
  margin-top: 0;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  padding-bottom: 10px;
}

.card-inner img {
  display: block;
  margin: 0 auto 20px;
  width: 80%;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
}

最后，我们需要为悬停效果设置样式。在这里，我们使用 ::before 和 ::after 伪元素来实现悬停效果：

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

.card-inner::before {
  background-color: rgba(255, 255, 255, .2);
  transform: translate3d(-7px, -7px, 0) rotateZ(45deg);
  transition: transform .3s ease-in-out;
}

.card-inner:hover::before {
  transform: translate3d(0, 0, 0) rotateZ(45deg);
}

.card-inner::after {
  background-color: rgba(0, 0, 0, .2);
  transform: translate3d(7px, 7px, 0) rotateZ(45deg);
  transition: transform .3s ease-in-out;
}

.card-inner:hover::after {
  transform: translate3d(0, 0, 0) rotateZ(45deg);
}

在这里，我们使用 ::before 和 ::after 伪元素来创建两个方向相反的半透明块，同时旋转和平移它们，使其产生 Glassmorphism 效果。我们还使用 transition 属性添加动画效果。

完整代码

完整的 HTML 和 CSS 代码如下：

<div class="card">
  <div class="card-inner">
    <h2>Card Title</h2>
    <img src="https://via.placeholder.com/150" alt="Card Image" />
  </div>
</div>

.card {
  width: 300px;
  height: 400px;
  background-color: rgba(255, 255, 255, .2);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .1);
  overflow: hidden;
  position: relative;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, .5),
              -20px -20px 50px rgba(255, 255, 255, .2);
}

.card-inner {
  padding: 15px;
}

.card-inner h2 {
  margin-top: 0;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  padding-bottom: 10px;
}

.card-inner img {
  display: block;
  margin: 0 auto 20px;
  width: 80%;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
}

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

.card-inner::before {
  background-color: rgba(255, 255, 255, .2);
  transform: translate3d(-7px, -7px, 0) rotateZ(45deg);
  transition: transform .3s ease-in-out;
}

.card-inner:hover::before {
  transform: translate3d(0, 0, 0) rotateZ(45deg);
}

.card-inner::after {
  background-color: rgba(0, 0, 0, .2);
  transform: translate3d(7px, 7px, 0) rotateZ(45deg);
  transition: transform .3s ease-in-out;
}

.card-inner:hover::after {
  transform: translate3d(0, 0, 0) rotateZ(45deg);
}

总结

在这篇文章中，我们介绍了如何使用 HTML 和 CSS 实现 Glassmorphism 卡片悬停效果。我们使用了 box-shadow 和 ::before、::after 伪元素来模拟玻璃的效果，并创建了一个微妙的悬停效果，从而使我们的卡片看起来更加现代和漂亮。如果你对这种效果感兴趣，可以在自己的项目中试试看！