酷CSS悬停效果，使用背景剪辑，口罩和3D

我们已经浏览了一系列有关CSS悬停效果的有趣方法的文章。我们从使用CSS背景属性的一堆示例开始，然后移至文本阴影属性，从技术上讲，我们在技术上没有使用任何阴影。我们还将它们与CSS变量和Calc（）结合在一起，以优化代码并易于管理。

在本文中，我们将建立这两篇文章，以创建更复杂的CSS悬停动画。我们谈论的是背景剪裁，CSS面具，甚至通过3D视角弄湿了我们的脚。换句话说，这次我们将探索先进的技术，并以悬停效果的形式推动CSS可以做的事情！

凉爽的悬停效果系列：

1. 使用背景属性的凉爽悬停效果
2. 使用CSS Textshadow的凉爽悬停效果
3. 使用背景剪辑，口罩和3D的凉爽悬停效果（您在这里！ ）

这只是我们所做的事情的味道：

使用背景折叠的悬停效果

让我们来谈谈背景剪辑。此CSS属性接受文本关键字值，该值使我们能够将梯度应用于元素的文本而不是实际背景。

因此，例如，我们可以像使用颜色属性一样更改悬停文本的颜色，但是这样我们将颜色更改动画：

我所做的就是添加背景折叠：文本到元素并过渡背景位置。不必比这更复杂！

但是，如果将多个梯度与不同的背景剪辑值相结合，我们可以做得更好。

在那个示例中，我将两个不同的梯度和两个值与背景clip一起使用。第一个背景梯度被夹在文本上（由于文本值）以将颜色设置为悬停，而第二个背景梯度则创建了底部下划线（多亏了Padding-Box值）。其他所有内容都是从我们在本系列第一篇文章中所做的工作中直接复制的。

悬停效果如何，在看起来像文本的方式上从上到下滑动，然后涂上颜色：

这次，我更改了创建线路的第一个梯度的大小。然后，我将其与另一个更新文本颜色的渐变以创建幻觉！您可以看到这支笔中发生的事情：

我们只抓取了我们可以使用背景覆盖能力来做的事情！但是，这项技术可能是您要避免在生产中使用的东西，因为众所周知，Firefox有很多与背景折叠有关的错误。野生动物园也有支持问题。这只会给铬片提供对这些东西的坚实支持，因此也许随着我们的继续而打开。

让我们继续使用背景折叠来转移另一个悬停效果：

与我们刚刚涵盖的内容相比，您可能会认为这看起来非常容易 - 您是对的，这里没有什么花哨的。我要做的就是在增加一个梯度的同时增加另一个梯度。

但是我们在这里看先进的悬停效果，对吗？让我们将其更改一些，以便当鼠标光标离开元素时，动画会有所不同。相同的悬停效果，但动画的结局不同：

酷吧？让我们剖析代码：

 .hover {
  -C：＃1095C1; / *颜色 */

  颜色：＃0000;
  背景： 
    线性毕业生（90DEG，#FFF 50％，var（-c）0）calc（100％-var（-_ p，0％）） / 200％， 
    线性级别（var（-c）0 0）0％100％ / var（-_ p，0％）no-repeat，
    var（-_ C，＃0000）;
  -webkit-background-clip：文本，填充框，填充框；
          背景纸条：文本，填充框，填充框；
  过渡：0s，颜色.5s，背景色.5s;
}
.Hover：悬停{
  颜色：#fff;
  -_ C：var（-c）;
  -_ P：100％；
  过渡：0.5s，颜色0s .5s，背景色0s .5s;
}

我们有三个背景层 - 两个梯度和使用-_ C变量定义的背景色，最初设置为透明（＃0000）。在悬停时，我们将颜色更改为白色，-_ C变量为主颜色（-C）。

这是该过渡的情况：首先，我们将过渡应用到所有事物，但我们将颜色和背景色延迟了0.5s以创建滑动效果。此后，我们更改颜色和背景色。您可能会注意到没有视觉上的更改，因为文本已经是白色（由于第一个梯度），并且背景已经设置为主要颜色（由于第二个梯度）。

然后，在鼠标外，我们将即时更改应用于所有内容（请注意0s延迟），除了具有过渡的颜色和背景色。这意味着我们将所有梯度都放回他们的初始状态。同样，您可能不会看到视觉上的更改，因为文本颜色和背景色在悬停上已经改变。

最后，我们将褪色应用于颜色和背景色，以创建动画的鼠标输出部分。我知道，掌握可能很棘手，但是您可以通过使用不同的颜色更好地可视化技巧：

悬停在上述很多次，您会看到在悬停在悬停的属性以及在鼠标上进行动画的属性。然后，您可以了解我们如何到达两个不同的动画以达到相同的悬停效果。

我们不要忘记我们在本系列的先前文章中使用的干开关技术，以帮助减少代码数量，仅在开关中使用一个变量：

 .hover {
  -C：16 149 193; / *使用RGB格式的颜色 */

  颜色：RGB（255 255 255 / var（-_i，0））;
  背景：
    / *渐变＃1 */
    线性毕业生（90级，#FFF 50％，RGB（var（-c））0）calc（100％-var（-_ i，0） * 100％） / 200％，200％
    / *渐变＃2 */
    线性级别（RGB（var（-c））0 0）0％100％ / calc（var（-_ i，0） * 100％）no-repeat，
    / *背景颜色 */
    rgb（var（-c）/ var（-_ i，0））;
  -webkit-background-clip：文本，填充框，填充框；
          背景纸条：文本，填充框，填充框；
  -_ t：calc（var（-_ i，0）*。5s）;
  过渡： 
    var（ -  _ t），
    颜色calc（.5s-var（-_t））var（-_ t），
    背景色计算（.5S-var（-_t））var（-_ t）;
}
.Hover：悬停{
  -_ I：1;
}

如果您想知道为什么我要使用主要颜色的RGB语法，那是因为我需要使用Alpha透明度。我还使用变量-_t来减少过渡属性中使用的冗余计算。

在我们转到下一部分之前，这里还有更多悬停效果的例子，我前一段时间依靠背景剪辑。详细介绍每个人要花太长时间，但是到目前为止，我们已经学到了一些知识，您可以轻松理解代码。独自尝试其中的某些而无需查看代码，这可能是一个很好的灵感。

我知道，我知道。这些是疯狂且罕见的悬停效果，我意识到它们在大多数情况下都太多了。但这就是练习和学习CSS的方法。请记住，我们推动了CSS悬停效应的限制。悬停效果可能是一种新颖性，但是我们在此过程中学习的新技术肯定可以用于其他事物。

使用CSS掩码悬停效果

猜怎么着？ CSS蒙版属性使用梯度与背景属性相同，因此您会发现我们下一步制作的内容非常简单。

让我们首先建立一个幻想的下划线。

我正在使用背景在该演示中创建锯齿形底部边框。如果我想将动画应用于该下划线，那么仅使用背景属性就可以进行乏味。

输入CSS面具。

该代码看起来可能很奇怪，但是逻辑仍然与我们对所有先前背景动画一样。面具由两个梯度组成。第一个梯度用不透明的颜色定义，该颜色涵盖了内容区域（由于内容框值）。第一个梯度使文本可见，并掩盖了底部的曲折边框。 content-box是蒙版-clip值，其行为与背景-CLIP相同

线性级别（＃000 0 0）content-box

第二个梯度将覆盖整个区域（多亏了Padding-Box）。该一个具有使用-_ P变量定义的宽度，并且将放置在元素的左侧。

线性级别（＃000 0 0）0 / var（-_ p，0％）padding-box

现在，我们要做的就是更改悬停的-_ p的值，以为第二个梯度创建滑动效果并揭示下划线。

 .Hover：悬停{
  -_ P：100％；
  颜色：var（-c）;
}

以下演示将蒙版层用作背景，以更好地查看发生的技巧。想象一下，绿色和红色部分是元素的可见部分，而其他所有内容都是透明的。如果我们使用相同的梯度，这就是面具会做的。

有了这样的技巧，我们可以通过简单地使用掩码属性使用不同的梯度配置来轻松创建很多变化：

该演示中的每个示例使用掩模的梯度配置略有不同。也请注意，背景配置和掩码配置之间的代码中的分离。它们可以独立管理和维护。

让我们通过用波浪的下划线替换Zig-Zag下划线来更改背景配置：

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

就像，为什么不这样的事情：

这对您来说是一个挑战：最后一个演示中的边界是使用面具属性来揭示它的梯度。您能找出动画背后的逻辑吗？乍一看可能看起来很复杂，但是它与我们为依赖梯度的其他大多数悬停效应所研究的逻辑非常相似。在评论中发布您的解释！

3D中的悬停效应

您可能会认为不可能用单个元素创建3D效果（并且不诉诸伪元素！），但是CSS可以使其实现。

您所看到的没有真正的3D效果，而是在结合CSS背景，剪辑路径和变换属性的2D空间中的3D幻想。

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

 -C：＃1095C1; /* 颜色 */
-b：.1em; / *边框长度 */
-d：20px; / *立方深度 */

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

 -_ s：calc（var（-d）var（-b））;
颜色：var（-c）;
边界：固体＃0000; / *第四值设置颜色的alpha */
边框宽度：var（-b）var（-b）var（-_ s）var（-_ s）;

元素的顶部和右侧都需要等于-b值，而底部和左侧则需要等于-b和-d的总和（这是-_ s变量）。

在技​​巧的第二部分中，我们需要定义一个涵盖我们先前定义的所有边界区域的梯度。圆锥梯度将为此作用：

背景：圆锥级（
  在左var（ -  _ s）底部var（-_ s），
  ＃0000 90DEG，var（-c）0
 ） 
 0 100％ /计算（100％-var（-b））calc（100％-var（-b））边框框；

我们为技巧的第三部分添加了另一个梯度。这将使用两个半透明的白色值，将第一个先前梯度重叠，以创建主颜色的不同阴影，从而使我们的阴影和深度幻想。

圆锥分子（
  在左var（-d）底部var（-d），
  ＃0000 90DEG，
  RGB（255 255 255 / 0.3）0 225吉
  RGB（255 255 255 / 0.6）0
）边框框

最后一步是应用CSS剪辑路径以切开角落的弯道：

剪辑路径：多边形（
  0％var（-d）， 
  var（-d）0％， 
  100％0％， 
  100％计算（100％-var（-d））， 
  计算（100％-var（-d））100％， 
  0％100％
）

就这样！我们刚刚制作了一个3D矩形，只有两个梯度和一个夹子路径，我们可以使用CSS变量轻松调整。现在，我们要做的就是使它动画！

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

剪辑路径：多边形（
  0％var（-d）， / *逆转var（-d）0％ * /
  var（-d）0％， 
  100％0％， 
  100％计算（100％-var（-d））， 
  计算（100％-var（-d））100％， / *逆转100％calc（100％-var（-d）） * / 
  0％100％ / *逆转var（-d）calc（100％-var（-d）） * /
）

诀窍是隐藏元素的底部和左侧部分，以便左侧的所有只是矩形元素，没有任何深度。

这支笔隔离了动画的剪辑路径部分，以查看其在做什么：

最后的触摸是使用翻译将元素朝相反的方向移动 - 幻觉是完美的！这是使用不同的自定义属性值的效果，以不同的深度：

第二个悬停效应遵循相同的结构。我要做的就是更新一些值以创建左上角的动作，而不是右上角。

结合效果！

我们涵盖的所有内容令人敬畏的事情是，它们都相互补充。这是一个示例，我将系列中第二篇文章的文本阴影效果添加到第一篇文章的背景动画技术中，同时使用我们介绍的3D技巧：

实际的代码起初可能会令人困惑，但请继续进行剖析 - 您会注意到，这仅仅是这三种不同效果的组合，几乎可以一起使用。

让我以最后的悬停效果完成这篇文章，其中我将背景，剪辑路径和一点点透视图组合在一起，以模拟另一个3D效果：

我在图像上应用了相同的效果，结果对于用一个元素模拟3D非常好：

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

总结

oof，我们完成了！我知道，这是很多棘手的CSS，但是（1）我们在正确的网站上使用此类内容，并且（2）目标是通过允许它们相互交互，将我们对不同CSS属性的理解推向新级别。

现在，您可能会问下一步是什么，因为我们正在结束一系列高级CSS悬停效果。我会说下一步是将我们所学的所有内容应用于其他元素，例如按钮，菜单项，链接等。由于这个确切的原因，我们将这些技巧限制在标题元素方面都非常简单；实际元素没关系。采取概念并与他们一起创建，实验和学习新事物！

以上是酷CSS悬停效果，使用背景剪辑，口罩和3D的详细内容。更多信息请关注PHP中文网其他相关文章！