使用CSS制作背景悬停效果

　　在本文中，我将向您展示使用 和 制作一些有益的悬停背景效果的方法。background-position background-size backgroud-image

　　了解如何“后台位置”工作

　　在今天构建演示之前，让我们学习如何使用百分比值。因为几乎在演示中，我们将使用本文中的百分比值进行构建。background-position

　　首先，不要以相同的方式处理 。我将在下面显示有关如何使用和：background-positionposition position top left

　　在这个例子中，我们可以看到，当我们想要定义一个从“元素B”到“元素A”左侧和顶部的空间范围时，您可以将我们的范围值定义为CSS，如下所示：

　　与 不同，使用其他方式。从背景到元素的空间范围将按以下方式计算：position background-position

　　为了便于理解，您可能会在此图像中看到一个示例：

　　在此示例中，我将“左背景位置”值定义为“100%”，从图像到左侧的范围值为 50%。请记住此公式，因为我们将在本文中将其用于许多示例。

　　具有“背景大小”的简单悬停效果

　　这是一个理论!让我们开始仅使用 和 构建一些基本示例。我们将通过更改背景图像的宽度或高度值来制作四个背景悬停效果的示例。在这些示例中，我们将使用背景图像作为 带有 的绿色背景。background-sizebackground-positionlinear-gradient

　　background: linear-gradient(#488566 0 0);

　　让我们从第一个也是最简单的例子开始。这是一个文本，当它悬停时，它将从左到右填充背景色。为此，我们只需要从 0% 开始，并在 中将此值设置为 100%。为了使此动画平滑转换，我们需要设置一个转换时间的值，在这里我将其设置为“0.4s”。background-size:hover

　　让我们看看我们的结果：

　　就是这么简单！在上面的示例中，我们通过更改 的宽度来制作悬停效果。如果我们改变高度而不是宽度会发生什么？让我们看看这段代码及其结果：background-size

　　它的工作原理！我认为这是毫不费力的。是否要制作与上述示例相反的示例类似的示例?背景色将从右到左和从下到上填充。为此，我只需要将 设置为 100%，以确保背景始终位于元素的底部或右侧。这些情况有两个示例：background-position

　　你看到了吗?只需要更改值，我们就可以反转悬停效果。在下一部分中，我们将尝试使用 做一些示例。这是这部分的笔：background-position transitions

　　使用单个过渡属性创建效果

　　在上面的示例中，我们用 和 做了“回头”效果。在这一部分中，我们将构建“单向”效果，这与“回头”效果不同。我们这里有一个小例子，当元素悬停时，背景色将从左到右填充，如果元素没有悬停，则从左到右删除。background-size background-position

　　要使这些悬停效果，我们需要在上面的示例中修改 和 。为了便于理解，我将在这里逐步制作并解释一个示例。transition background-position

　　我选择的示例是从左到右的“单向”悬停。在这种效果中，我们有五种状态“悬停前”，“开始悬停”，“完全悬停”，“开始取消悬停”和“取消悬停”。

　　为此，我们需要编译上面的两个示例。在“开始悬停”阶段，背景色需要从左到右填充。为此，我们将背景大小从0%填充到100%，并将其设置为0%。在“开始解锁”中，我们将从100%设置为0%，并将设置100%。此步骤中的一件重要事情是 。如您所见，我们只想通过更改背景大小来制作效果。这意味着我们只需要为 设置 的转换时间。以下是此悬停和结果的 CSS 代码：background-position background-size background-position transition background-size

　　它运作良好。您是否想知道如果我们不为所有属性进行设置会发生什么?我看看：transition

　　这种效应是混乱的，因为和正在同时发生的转变。这就是为什么我只设置为.请注意，请考虑我们需要做出效果的转换。在进入下一部分之前，我将尝试完成本部分中的其余示例。background-size background-position transition background-size

　　我认为在理解了本节中的第一个示例之后，您可以轻松做到这一点。在这一部分中，我们学习了如何使用单个过渡属性创建效果。在下一部分中，我们将编译许多过渡属性，并制作一些令人敬畏的悬停效果。delay

　　如果您想测试或修改某些内容，让我们检查此笔。

　　使用多个过渡属性和延迟使效果

　　在上面的所有示例中，我们只使用单个属性效果来制作效果。在这一部分中，我们将学习使用许多过渡属性制作效果的方法，并使用 来控制它们。让我们看一下我们将在这一部分中构建的示例。delay

　　我认为这很有趣。要制作它们，我们只需要 和 。不需要 、 、 子元素或类似的东西。正如我们在照片中看到的，我们需要在悬停效果中做两个动作。第一个动作是使文本下方的行，此行将从左到右填充。第二个操作是用颜色从下到上填充元素的其余部分。background-position background-size transition before after

　　在编码之前，我认为我们需要为这种效果提出一个想法。因为我们只使用一个背景，所以在这种情况下，我们不能对一个属性进行两次转换。这就是为什么我有另一个想法来使这种效果与 和 .在我的想法中，我们需要定义一个高度较小的背景(也许是0.1rem)。此背景将像下面的照片一样从元素中移出。background-position background-size background-position

　　现在，我们将规划悬停效果。为此，我们将执行两个操作。第一个操作是将背景移动到元素的内部。第二个操作是用 填充从底部到元素其余部分的背景。background-size

　　让我们遵循这个计划。第一步，在元素外部制作背景。因为 不像 ，所以我们不能设置一个负值来移动背景到元素的外部。您还记得计算背景的 x 偏移量和 y 偏移量的方法吗?我再把它放在这里：background-position position

　　基于它，让我们找到符合x值大于零的方程的值。我们有许多符合这个等式的值。但是我会选择200%的x和200%的y。这意味着我们将具有“200%0.1rem”和“200%100%”的值。这是此步骤的照片：(100% — x) * y = -xbackground-size background-position

　　让我们转到悬停步骤。第一个操作是移动元素内部的背景。根据等式，我们可以很容易地找到y的值，“100%”。关于 ，我们只需要将值从“0.1rem”提高到“100%”。关于 ，如果要在多个进程中运行多个属性，可以定义该值。在我们的例子中，我们想要首先运行的转换，我们只需要设置与持续时间相同的值的延迟时间。这是我的代码：(100%-200%) * y = 100%background-size transition delay background-position background-size background-position

　　让我们检查结果：

　　我认为我们的想法按照我们的计划运作良好。基于这个例子，我认为我们可以制作悬停效果，从右到左填充背景。我们需要改变的是背景的位置(值)。如果我们想将背景移到右侧元素之外，我们只需要稍微修改上面的等式。这里将是.我们可以发现x和y是“200%”和“-200%”。以下是我们针对此更改的代码。background-position(100%-x) * y = x

　　在这里，我们得到的结果：

　　我认为我们可以进入下一部分，我们将在多个背景下工作。这是笔和其他例子：

　　使用多个背景制作一些悬停效果

　　从第一部分到上一部分，我们只使用一个背景来制作悬停效果。在这些例子中，我们可以看到基本流程是背景将从一个地方填充到元素的其余部分。我猜你有一些背景效果，以前在很多地方都发生过。在这一部分中，我们将制作一些具有多个背景的悬停效果。如果您了解前面的部分，则可以轻松完成此部分。

　　要定义多个背景，我们只需对单个背景执行相同的操作即可。这些背景由逗号“，”分隔。下面是一个示例代码和结果。

　　使用多个背景可以帮助我们将悬停效果编译为一个效果。我想我们可以做两个基本的例子，它们是从上面的例子中编译出来的。我们将要构建这些效果。

　　在第一个示例中，我们只需要编译“简单悬停效果与”部分中的两个示例。第一个背景将从左到右开始，第二个背景将从右到左开始。这很简单，让我们看看代码：background-size

　　在此代码中，我将宽度值用作“51%”，因为我们不需要填充每个背景中的所有元素内容。

　　我们也对第二个示例执行相同的操作，只需要编译上面的两个示例即可。这是我的代码和它们的结果：

　　这种方式也适用于具有许多过渡和延迟的悬停效果。让我们编译边框示例！

　　这是一个很棒的悬停效果。只是与和不需要任何，或Java脚本...back ground before after。