使用背景剪辑、蒙版和 3D 的酷炫 CSS 悬停效果

我们已经浏览了一系列关于 CSS 悬停效果的有趣方法的文章。 我们从一个 一堆使用 CSS 的例子 background ，然后转到 text-shadow 财产在哪里 从技术上讲，我们没有使用任何阴影. 我们还将它们与 CSS 变量和 calc() 优化代码并使其易于管理。

在本文中，我们将在这两篇文章的基础上创建更复杂的 CSS 悬停动画。 我们谈论的是背景剪裁、CSS 蒙版，甚至是 3D 透视图。 换句话说，这次我们将探索高级技术，并突破 CSS 对悬停效果的作用！

---

这里只是我们正在做的一个味道：

悬停效果使用 background-clip

让我们来谈谈 background-clip. 这个 CSS 属性接受一个 text 关键字值 这允许我们将渐变应用于 文本 一个元素而不是实际的 背景.

因此，例如，我们可以像使用 color 属性，但是这样我们可以动画颜色变化：

我所做的只是添加 background-clip: text 到元素和 transition 此 background-position. 不必比这更复杂！

但是如果我们将多个渐变与不同的背景裁剪值结合起来，我们可以做得更好。

在那个例子中，我使用了两个不同的渐变和两个值 background-clip. 第一个背景渐变被剪裁到文本（感谢 text 值）设置悬停时的颜色，而第二个背景渐变创建底部下划线（感谢 padding-box 价值）。 其他一切都是直接复制的 我们在第一篇文章中所做的工作 这个系列。

悬停效果如何，条形图从上到下滑动，看起来像是扫描了文本，然后着色：

这次我改变了第一个渐变的大小来创建线条。 然后我用另一个渐变来滑动它，更新文本颜色以创建错觉！ 您可以想象这支笔中发生的事情：

我们只触及了我们可以做的事情的皮毛 background-clip平权！ 但是，您可能希望避免在生产环境中使用这种技术，因为众所周知 Firefox 具有 很多报告的错误 相关的 background-clip. Safari 也有支持问题。 剩下的只有 Chrome 对这些东西有坚实的支持，所以也许在我们继续的时候把它打开。

让我们继续使用另一个悬停效果 background-clip:

与我们刚刚介绍的内容相比，您可能认为这个看起来超级简单 - 您是对的，这里没有什么特别的。 我所做的只是滑动一个渐变，同时增加另一个渐变的大小。

但我们是来看高级悬停效果的，对吧？ 让我们稍微改变一下，这样当鼠标光标离开元素时动画会有所不同。 相同的悬停效果，但动画的结尾不同：

酷吧？ 让我们剖析一下代码：

.hover { --c: #1095c1; /* the color */ color: #0000; background: linear-gradient(90deg, #fff 50%, var(--c) 0) calc(100% - var(--_p, 0%)) / 200%, linear-gradient(var(--c) 0 0) 0% 100% / var(--_p, 0%) no-repeat, var(--_c, #0000); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; transition: 0s, color .5s, background-color .5s;
}
.hover:hover { color: #fff; --_c: var(--c); --_p: 100%; transition: 0.5s, color 0s .5s, background-color 0s .5s;
}

我们有三个背景层——两个渐变和 background-color 定义使用 --_c 最初设置为透明的变量（#0000）。 悬停时，我们将颜色更改为白色，然后 --_c 主颜色的变量（--c).

这是正在发生的事情 transition：首先，我们对所有内容都应用了过渡，但我们延迟了 color 和 background-color by 0.5s 创造滑动效果。 在那之后，我们改变 color 和 background-color. 您可能会注意到没有视觉上的变化，因为文本已经是白色（感谢第一个渐变）并且背景已经设置为主要颜色（感谢第二个渐变）。

然后，在鼠标移出时，我们对所有内容应用即时更改（注意 0s 延迟），除了 color 和 background-color 有一个过渡。 这意味着我们将所有梯度恢复到它们的初始状态。 同样，您可能不会看到任何视觉变化，因为文本 color 和 background-color 悬停时已经改变。

最后，我们将褪色应用于颜色和 background-color 创建动画的鼠标移出部分。 我知道，这可能很难掌握，但您可以通过使用不同的颜色来更好地想象这个技巧：

将上面多次悬停，您将看到悬停时动画的属性和鼠标移出动画的属性。 然后，您可以了解我们如何为相同的悬停效果实现两个不同的动画。

我们不要忘记 我们使用的 DRY 切换技术 在本系列的前几篇文章中，通过仅使用一个变量进行开关来帮助减少代码量：

.hover { --c: 16 149 193; /* the color using the RGB format */ color: rgb(255 255 255 / var(--_i, 0)); background: /* Gradient #1 */ linear-gradient(90deg, #fff 50%, rgb(var(--c)) 0) calc(100% - var(--_i, 0) * 100%) / 200%, /* Gradient #2 */ linear-gradient(rgb(var(--c)) 0 0) 0% 100% / calc(var(--_i, 0) * 100%) no-repeat, /* Background Color */ rgb(var(--c)/ var(--_i, 0)); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; --_t: calc(var(--_i,0)*.5s); transition: var(--_t), color calc(.5s - var(--_t)) var(--_t), background-color calc(.5s - var(--_t)) var(--_t);
}
.hover:hover { --_i: 1;
}

如果您想知道为什么我使用 RGB 语法作为主色，那是因为我需要使用 alpha 透明度。 我也在使用变量 --_t 以减少在 transition 属性。

在我们进入下一部分之前，这里有更多我之前做过的悬停效果示例，它们依赖于 background-clip. 详细介绍每一个都太长了，但是根据我们目前所学的知识，您可以轻松理解代码。 在不查看代码的情况下单独尝试其中一些可能是一个很好的灵感。

我知道我知道。 这些是疯狂且不常见的悬停效果，我意识到在大多数情况下它们太多了。 但这是练习和学习 CSS 的方法。 记住，我们 挑战极限 CSS 悬停效果。 悬停效果可能是一种新鲜事物，但我们正在学习新技术，这些技术肯定可以用于其他事情。

使用 CSS 的悬停效果 mask

你猜怎么着？ CSS mask 属性使用渐变的方式与 background property 确实如此，所以你会看到我们接下来要做的非常简单。

让我们从建立一个花哨的下划线开始。

我正在使用 background 在该演示中创建锯齿形底部边框。 如果我想为该下划线应用动画，单独使用背景属性会很乏味。

输入 CSS mask.

代码可能看起来很奇怪，但逻辑仍然与我们之前对所有背景动画所做的相同。 这 mask 由两个梯度组成。 第一个渐变用覆盖内容区域的不透明颜色定义（感谢 content-box 价值）。 第一个渐变使文本可见并隐藏底部之字形边框。 content-box 是 mask-clip 行为相同的值 background-clip

linear-gradient(#000 0 0) content-box

第二个渐变将覆盖整个区域（感谢 padding-box）。 这个有一个使用定义的宽度 --_p 变量，它将被放置在元素的左侧。

linear-gradient(#000 0 0) 0 / var(--_p, 0%) padding-box

现在，我们要做的就是改变 --_p 在悬停时为第二个渐变创建滑动效果并显示下划线。

.hover:hover { --_p: 100%; color: var(--c);
}

下面的演示使用遮罩层作为背景，以更好地了解正在发生的技巧。 想象绿色和红色部分是元素的可见部分，而其他一切都是透明的。 如果我们使用相同的渐变，这就是蒙版的作用。

有了这样的技巧，我们可以很容易地通过简单地使用不同的渐变配置来创建很多变化 mask 属性：

该演示中的每个示例都使用略有不同的渐变配置 mask. 还要注意，后台配置和掩码配置在代码中的分离。 它们可以独立管理和维护。

让我们通过将之字形下划线替换为波浪下划线来更改背景配置：

另一个悬停效果集合！ 我保留了所有蒙版配置并更改了背景以创建不同的形状。 现在，你可以理解我是如何做到的 达到 400 个悬停效果 没有伪元素——我们仍然可以拥有更多！

就像，为什么不这样：

这是给你的一个挑战： 最后一个演示中的边框是使用渐变的 mask 属性来揭示它。 你能弄清楚动画背后的逻辑吗？ 乍一看它可能看起来很复杂，但它与我们在大多数其他依赖渐变的悬停效果中看到的逻辑非常相似。 在评论中发表你的解释！

3D 悬停效果

您可能认为用单个元素创建 3D 效果是不可能的（并且不借助伪元素！），但 CSS 有办法做到这一点。

你看到的不是真正的 3D 效果，而是结合 CSS 的 3D 空间中的 2D 完美幻觉 background, clip-path及 transform 属性。

我们要做的第一件事是定义我们的变量：

--c: #1095c1; /* color */
--b: .1em; /* border length */
--d: 20px; /* cube depth */

然后我们创建一个透明边框，其宽度使用上述变量：

--_s: calc(var(--d) + var(--b));
color: var(--c);
border: solid #0000; /* fourth value sets the color's alpha */
border-width: var(--b) var(--b) var(--_s) var(--_s);

元素的顶部和右侧都需要等于 --b 值，而底部和左侧需要等于 --b 和 --d （哪一个是 --_s 多变的）。

对于技巧的第二部分，我们需要定义一个渐变来覆盖我们之前定义的所有边界区域。 一个 conic-gradient 将为此工作：

background: conic-gradient( at left var(--_s) bottom var(--_s), #0000 90deg,var(--c) 0 ) 0 100% / calc(100% - var(--b)) calc(100% - var(--b)) border-box;

我们为技巧的第三部分添加了另一个渐变。 这个将使用两个半透明的白色值，它们与之前的第一个渐变重叠，以创建主色的不同阴影，给我们阴影和深度的错觉。

conic-gradient( at left var(--d) bottom var(--d), #0000 90deg, rgb(255 255 255 / 0.3) 0 225deg, rgb(255 255 255 / 0.6) 0
) border-box

最后一步是应用 的CSS clip-path 为那种长长的阴影感觉走捷径：

clip-path: polygon( 0% var(--d), var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, 0% 100%
)

就这样！ 我们刚刚制作了一个 3D 矩形，只有两个渐变和一个 clip-path 我们可以使用 CSS 变量轻松调整。 现在，我们所要做的就是为它制作动画！

注意上图中的坐标（以红色表示）。 让我们更新它们以创建动画：

clip-path: polygon( 0% var(--d), /* reverses var(--d) 0% */ var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, /* reverses 100% calc(100% - var(--d)) */ 0% 100% /* reverses var(--d) calc(100% - var(--d)) */
)

诀窍是隐藏元素的底部和左侧部分，这样剩下的就是一个没有深度的矩形元素。

这支笔隔离 clip-path 动画的一部分，看看它在做什么：

最后一步是使用 translate ——幻觉是完美的！ 以下是针对不同深度使用不同自定义属性值的效果：

第二个悬停效果遵循相同的结构。 我所做的只是更新一些值以创建左上运动而不是右上运动。

组合效果！

我们所涵盖的所有内容的令人敬畏的是，它们都相互补充。 这是我要添加的示例 此 text-shadow 第二条的效果 在系列中 background 第一篇文章中的动画技术 在使用我们刚刚介绍的 3D 技巧时：

实际代码一开始可能会令人困惑，但请继续深入剖析它——您会注意到它只是这三种不同效果的组合，几乎混在一起。

让我以最后一个悬停效果结束这篇文章，其中我结合了背景、剪辑路径和一些 perspective 模拟另一个 3D 效果：

我对图像应用了相同的效果，结果非常适合用单个元素模拟 3D：

想仔细看看最后一个演示是如何工作的？ 我在上面写了一些东西。

结束了

哦，我们完成了！ 我知道，这是很多棘手的 CSS，但是（1）我们在正确的网站上处理这类事情，以及（2）我们的目标是通过允许它们与另一个。

您可能会问，既然我们即将结束这一小系列的高级 CSS 悬停效果，下一步是什么。 我想说下一步是把我们学到的所有东西应用到其他元素上，比如按钮、菜单项、链接等。我们让事情变得相当简单，因为确切的原因将我们的技巧限制在标题元素上; 实际元素无关紧要。 接受这些概念并与它们一起运行，以创建、试验和学习新事物！

---

使用背景剪辑、蒙版和 3D 的酷炫 CSS 悬停效果 最初发表于 CSS技巧。 你应该 获取时事通讯.

• 硬币聪明。 欧洲最好的比特币和加密货币交易所。
• 柏拉图区块链。 Web3 元宇宙智能。 知识放大。 自由登入。
• 加密鹰。 山寨币雷达。 免费试用。
• 来源：https://css-tricks.com/css-hover-effects-background-masks-3d/