不久前，杰夫（Geoff）写了一篇有关悬停效果的文章。该效果依赖于CSS伪元素，转换和过渡的组合。许多评论表明，使用背景属性可以执行相同的效果。杰夫（Geoff）提到那是他最初的想法，这也是我的想法。我并不是说他登陆的伪元素很糟糕，但是知道实现相同效果的不同方法只会是一件好事。
在这篇文章中，我们将重新进行悬停效应，但也将其扩展到仅使用CSS背景属性的其他类型的悬停效果。
您可以在该演示中查看工作中的背景属性，以及我们如何使用自定义属性和Calc（）函数进行更多操作。我们将学习如何组合所有这些，因此我们将拥有精美的优化代码！
让我们从第一个效果开始，即杰夫（Geoff）在他的文章中详细介绍的效果。用于实现该效果的代码如下：
.hover-1 {
背景：线性级别（＃1095c1 0 0）var（-p，0） / var（-p，0）no-repeat;
过渡：.4S，背景位置0s;
}
.hover-1：悬停{
-p：100％；
颜色：#fff;
}如果我们省略了颜色过渡（这是可选的），则只需要三个CSS声明即可实现效果。您可能会惊讶于代码有多小，但是您会看到我们如何到达那里。
首先，让我们从简单的背景大小过渡开始：
我们正在将线性梯度的大小从0 100％提高到100％100％。这意味着宽度从0到100％，而背景本身则保持全高。到目前为止，没什么复杂的。
让我们开始优化。我们首先将梯度转换为仅使用颜色一次：
背景图像：线性级别（＃1095C1 0 0）;
语法看起来可能有些奇怪，但是我们告诉浏览器一种颜色应用于两个颜色停止，这足以定义CSS中的梯度。两种颜色停止均为0，因此浏览器会自动使最后一个100％使我们的梯度填充相同的颜色。快捷方式，ftw！
使用背景大小，我们可以省略高度，因为默认情况下梯度是全高。我们可以从背景大小的过渡：0到背景大小：100％。
.hover-1 {
背景图像：线性级别（＃1095C1 0 0）;
背景大小：0;
背景重复：无重复；
过渡：.4s;
}
.hover-1：悬停{
背景大小：100％；
}让我们介绍一个自定义属性，以避免重复背景大小：
.hover-1 {
背景图像：线性级别（＃1095C1 0 0）;
背景大小：var（-p，0％）;
背景重复：无重复；
过渡：.4s;
}
.hover-1：悬停{
-p：100％；
}我们不是最初定义的-P，因此将使用后备值（在我们的情况下为0％）。在悬停时，我们定义一个替代后备一（100％）的值。
现在，让我们使用速记版本组合所有背景属性以获取：
.hover-1 {
背景：线性级别（＃1095c1 0 0）左 / var（-p，0％）no-repeat;
过渡：.4s;
}
.hover-1：悬停{
-p：100％；
}我们越来越近了！请注意，我引入了一个左值（对于背景位置），在定义背景速记中的大小时，这是强制性的。另外，我们无论如何都需要它来实现我们的悬停效果。
我们还需要更新悬停的位置。我们可以通过两个步骤进行操作：
为此，我们还需要更新有关悬停的背景位置：
我们在代码中添加了两件事：
这意味着，在悬停的情况下，我们立即将背景位置从左侧更改（请参阅，我们需要该值！）向右更改，以便背景的大小从右侧增加。然后，当鼠标光标离开链接时，过渡从右到左反向播放，从而使我们从左侧降低了背景的大小。我们的悬停效果完成了！
但是您说我们只需要三个声明，有四个声明。
的确如此，很不错。左右值可以分别更改为0 0和100％0；而且，由于默认情况下我们的梯度已经是全高，因此我们可以使用0和100％获得。
.hover-1 {
背景：线性级别（＃1095C1 0 0）0 / var（-p，0％）no-repeat;
过渡：.4S，背景位置0s;
}
.hover-1：悬停{
-p：100％；
背景位置：100％；
}查看背景位置和-P如何使用相同的值？现在，我们可以将代码降低到三个声明：
.hover-1 {
背景：线性级别（＃1095c1 0 0）var（-p，0％） / var（-p，0％）no-repeat;
过渡：.4S，背景位置0s;
}
.hover-1：悬停{
-p：100％；
}自定义属性-P正在定义背景位置和大小。在悬停时，它也将更新它们。这是一个完美的用例，显示自定义属性如何帮助我们减少冗余代码并避免不止一次写入属性。我们使用自定义属性来定义我们的设置，并且仅在悬停时更新后者。
但是，杰夫所描述的效果是从左开始到右结尾的相反的。当似乎我们不能依靠相同的变量时，我们该怎么做？
我们仍然可以使用一个变量并稍微更新代码以实现相反的效果。我们想要的是从100％增加到0％，而不是0％到100％。我们有100％的差异可以使用calc（）表达：这样：
.hover-1 {
背景：线性级别（＃1095c1 0 0）calc（100％-var（-p，0％）） / var（-p，0％）no-repeat;
过渡：.4S，背景位置0s;
}
.hover-1：悬停{
-p：100％；
}-P将从0％变为100％，但由于Calc（），背景的位置将从100％变为0％。
我们仍然有三份声明和一个自定义属性，但效果不同。
在我们转到下一个悬停效果之前，我想突出显示您可能注意到的重要事项。在处理自定义属性时，我使用0％（带有单元）而不是单位的0。无单位零可以在自定义属性单独使用时工作，但是在Calc（）中会失败，我们需要明确定义单元。我可能需要另一篇文章来解释这个怪癖，但请始终记得在处理自定义属性时添加该单元。我在Stackoverflow上有两个答案（此处和此处），可以更详细地进行详细介绍。
为此，我们需要更复杂的过渡。让我们看一下分步插图，以了解正在发生的事情。
我们首先有一个背景位置过渡，然后是背景大小的转变。让我们将其翻译成代码：
.hover-2 {
背景图像：线性级别（＃1095C1 0 0）;
背景大小：100％.08em; /* .08em是我们的固定高度；根据需要进行修改。 */
背景位置： /* ??? */;
背景重复：无重复；
过渡：背景大小.3s，背景位置.3s .3s;
}
.Hover-2：悬停{
过渡：背景大小.3s .3s，背景位置.3s;
背景大小：100％100％；
背景位置： /* ??? */;
}注意两个过渡值的使用。在悬停的情况下，我们需要首先更改位置，然后更改大小，这就是为什么我们将大小延迟延迟的原因。在鼠标上，我们相反。
现在的问题是：我们用于背景位置什么值？我们把那些空白留给上面。背景大小的值是微不足道的，但是背景位置的值不是。如果我们保持实际配置，我们将无法移动梯度。
我们的梯度的宽度等于100％，因此我们不能在背景位置上使用百分比值来移动它。
与背景位置一起使用的百分比值始终是一种痛苦，尤其是当您第一次使用它们时。他们的行为是非直觉的，但定义良好且易于理解，如果我们得到背后的逻辑。我认为这将需要另一篇文章来完整解释为什么它是这样工作的，但是这是我在Stack Overflow上发布的另一个“长”解释。我建议花几分钟阅读该答案，您稍后再感谢我！
诀窍是将宽度更改为不同于100％的东西。让我们使用200％。我们不担心超过元素的背景，因为无论如何溢出都被隐藏了。
.hover-2 {
背景图像：线性级别（＃1095C1 0 0）;
背景大小：200％.08EM；
背景位置：200％100％；
背景重复：无重复；
过渡：背景大小.3s，背景位置.3s .3s;
}
.Hover-2：悬停{
过渡：背景大小.3s .3s，背景位置.3s;
背景大小：200％100％；
背景位置：100％100％；
}这就是我们得到的：
现在该优化我们的代码了。如果我们从第一个悬停效应中获取的想法，我们可以使用速记属性，并撰写更少的声明来制作这项工作：
.hover-2 {
背景：
线性级别（＃1095C1 0 0）无重复
var（-p，200％）100％ / 200％var（-p，.08em）;
过渡：.3S var（-t，0s），背景位置.3S calc（.3s-var（-t，0s））;
}
.Hover-2：悬停{
-p：100％；
-t：.3s;
}我们使用速记版本将所有背景属性添加在一起，然后使用-p表示我们的值。尺寸从.08EM变为100％，位置从200％变为100％
我还使用另一个变量-T来优化过渡属性。在鼠标悬停上，我们将其设置为.3S值，这给了我们：
过渡：.3s .3s，背景位置.3S 0s;
在鼠标外，-t是未定义的，因此将使用后回来值：
过渡：.3s 0s，背景位置.3s .3s;
过渡中我们不应该有背景大小吗？
这确实是我们可以做出的另一种优化。如果我们不指定任何属性，则表示“全部”属性，因此为“全部”属性（包括背景大小和背景位置）定义了过渡。然后将其再次定义为背景位置，类似于将其定义为背景大小，然后是背景位置。
“相似”与说“相同”是不同的。如果您更改悬停的更多属性，您将看到有所不同，因此在某些情况下，最后一个优化可能不合适。
我们仍然可以优化代码并仅使用一个自定义属性吗？
是的，我们可以！ Ana Tudor分享了一篇很棒的文章，解释了如何创建一个自定义属性可以更新多个属性的干燥开关。我不会在这里详细介绍，但是我们的代码可以这样修改：
.hover-2 {
背景：
线性级别（＃1095C1 0 0）无重复
Calc（200％-VAR（-i，0） * 100％）100％ / 200％calc（100％ * var（-i，0）.08em）;
过渡：.3S calc（var（-i，0） * .3s），背景位置.3S calc（.3s-calc（var（-i，0） * .3s））;
}
.Hover-2：悬停{
-i：1;
}- i自定义属性最初是未定义的，因此使用后返回值0。但是，在悬停时，我们用1替换0。您可以对两种情况进行数学，并获取每个情况的值。您可以将该变量视为一个“开关”，该变量在悬停时立即更新我们所有值。
同样，我们只回到了三个声明，以产生非常酷的悬停效果！
为此，我们将使用两个梯度而不是一个梯度。我们将看到，将多个梯度组合是创造花哨的悬停效果的另一种方法。
这是我们正在做的事情的图：
这就是CSS的外观：
.hover-3 {
背景图像：
线性级别（＃1095C1 0 0），
线性级别（＃1095C1 0 0）;
背景重复：无重复；
背景大小：50％.08EM；
背景位置：
-100％100％，
200％0;
过渡：背景大小.3s，背景位置.3s .3s;
}
.Hover-3：悬停{
背景大小：50％100％；
背景位置：
0 100％，
100％0;
过渡：背景大小.3s .3s，背景位置.3s;
}该代码几乎与我们涵盖的其他悬停效果相同。唯一的区别是我们有两个具有两个不同位置的梯度。位置值看起来可能很奇怪，但是同样，这与CSS中背景位置属性的百分比如何工作有关，因此，如果您想了解牢固的详细信息，我强烈建议您阅读堆栈溢出答案。
现在让我们优化！到目前为止，您现在就可以理解这个想法 - 我们正在使用速记属性，自定义属性和calc（）来整理。
.hover-3 {
-C：无重复线性级别（＃1095C1 0 0）;
背景：
var（-c）calc（-100％var（-p，0％））100％ / 50％var（-p，.08em），
var（-c）calc（200％-var（-p，0％））0 /50％var（-p，.08em）;
过渡：.3S var（-t，0s），背景位置.3S calc（.3s-var（-t，0s））;
}
.Hover-3：悬停{
-p：100％；
-t：0.3s;
}我添加了一个额外的自定义属性-C，该属性定义了梯度，因为在两个地方都使用了相同的梯度。
我在该演示中使用50.1％，而不是在背景大小上使用50％，因为它可以防止梯度之间的差距显示。由于类似的原因，我还向职位上增加了1％。
让我们使用开关变量进行第二个优化：
.hover-3 {
-C：无重复线性级别（＃1095C1 0 0）;
背景：
var（-c）calc（-100％var（-i，0） * 100％）100％ / 50％calc（100％ * var（-i，0）.08em），
var（-c）calc（200％-var（-i，0） * 100％）0 /50％calc（100％ * var（-i，0）.08em）;
过渡：.3S calc（var（-i，0） * .3s），背景位置.3S calc（.3s-var（-i，0） * .3s）;
}
.Hover-3：悬停{
-i：1;
}您开始在这里看到模式吗？我们所产生的影响并不是很困难。这更多是代码优化的“最后一步”。我们首先编写具有许多属性的详细代码，然后按照简单的规则（例如使用速记，删除默认值，避免冗余值等）将其减少，以尽可能简化事物。
我将提高最后效果的困难水平，但是您可以从其他示例中知道足够多，我怀疑您是否有任何问题。
这种悬停效应依赖于两个圆锥梯度和更多计算。
最初，我们在步骤1中具有零尺寸的两个梯度。我们在步骤2中增加了每个梯度的大小。我们一直增加其宽度，直到它们完全覆盖元素，如步骤3所示。在那之后，我们将它们滑到底部以更新其位置。这是悬停效应的“魔术”部分。由于两个渐变都将使用相同的颜色，因此在步骤4中更改其位置不会产生视觉上的差异 - 但是，一旦在步骤5中降低鼠标的大小后，我们将看到差异。
如果比较步骤2和步骤5，您会发现我们有不同的倾向。让我们将其翻译成代码：
.Hover-4 {
背景图像：
圆锥级（/ * ??? */），
圆锥分子（/ * ??? */）;
背景位置：
0 0，
100％0;
背景大小：0％200％；
背景重复：无重复；
过渡：背景大小.4s，背景位置0s;
}
.Hover-4：悬停{
背景大小： /* ??? */ 200％;
背景位置：
0 100％，
100％100％；
}职位很清楚。一个梯度从左上（0 0）开始，在左下角（0 100％）结束，而另一个梯度在右上（100％0）开始，在右下角（100％100％）结束。
我们正在使用背景位置和大小的过渡来揭示它们。我们只需要背景大小的过渡值。和以前一样，背景位置需要立即更改，因此我们为过渡持续时间分配了0S值。
对于大小，两个梯度都需要具有0宽度和两倍的元素高度（0％200％）。稍后，我们将看到它们的尺寸如何变化。让我们首先定义梯度配置。
下图说明了每个梯度的配置：
请注意，对于第二个梯度（以绿色表示），我们需要知道在我们创建的圆锥级别内使用它的高度。因此，我将添加一个线程，以设置元素的高度，然后为我们遗漏的圆锥梯度值尝试相同的值。
.Hover-4 {
-C：＃1095C1;
线高：1.2em;
背景图像：
圆锥分子（来自-135DEG的100％50％，var（-c）90DEG，＃0000 0），＃0000 0），
圆锥分子（来自-135DEG，1.2EM 50％，＃0000 90DEG，var（-c）0）;
背景位置：
0 0，
100％0;
背景大小：0％200％；
背景重复：无重复；
过渡：背景大小.4s，背景位置0s;
}
.Hover-4：悬停{
背景大小： /* ??? */ 200％;
背景位置：
0 100％，
100％100％；
}我们剩下的最后一件事是找出背景的大小。直觉上，我们可能会认为每个梯度都需要占据元素宽度的一半，但实际上还不够。
We get a gap equal to the height, so we actually need to do is increase the size of each gradient by half the height on hover for them to cover the whole element.
.Hover-4：悬停{
背景大小：计算（50％.6EM）200％；
背景位置：
0 100％，
100％100％；
}这是我们像以前的示例那样优化它们之后得到的：
.Hover-4 {
-C：＃1095C1;
线高：1.2em;
背景：
圆锥分子（来自-135DEG的100％50％，var（-c）90DEG，＃0000 0）
0 var（-p，0％） / var（-s，0％）200％no-repeat，
圆锥分子（来自-135deg at 1.2em 50％，＃0000 90DEG，var（-c）0）
100％var（-p，0％） / var（-s，0％）200％no-repeat;
过渡：.4S，背景位置0s;
}
.Hover-4：悬停{
-p：100％；
-s：计算（50％.6EM）;
}
只有一个自定义属性的版本呢？
我会留给你！在查看了四个类似的悬停效果之后，您应该能够将最终优化降低到单个自定义属性。在评论部分中分享您的作品！没有奖品，但是我们可能会以不同的实现和想法使所有人受益！
在我们结束之前，让我分享Ana Tudor烹制的最后一个悬停效果的版本。这是一个改进！但是请注意，由于已知的错误，它缺乏Firefox支持。尽管如此，这还是一个很好的主意，它表明了如何将梯度与混合模式相结合，以创造更酷的悬停效果。
我们做出了四个超级悬停效果！即使它们是不同的效果，它们都采用了使用CSS背景属性，自定义属性和Calc（）的相同方法。不同的组合使我们能够制作不同的版本，所有版本都使用相同的技术使我们拥有干净，可维护的代码。
如果您想获得一些想法，我制作了500个（是，500！）悬停效果，其中400个没有伪元素。我们在本文中介绍的四个只是冰山一角！
以上是使用背景属性的凉爽悬停效果的详细内容。更多信息请关注PHP中文网其他相关文章！
