为您的网站设计的5种优雅的CSS悬停效果 [2023]

css悬停效果发生在网站用户使用鼠标悬停在元素上的时候。结果可以是颜色、文本或其他动画效果的变化。这样的效果被添加到网站上以增强互动性并使其更易导航。

css悬停效果可以以过渡或动画的形式出现。

过渡

这样的效果允许您改变网页上元素的外观或行为。但是，必须有一个触发器，比如用户悬停在特定元素上。过渡是在触发后从初始状态到最终状态移动的。过渡只运行一次，不允许您指定中间点。

动画

这些效果有关键帧，可以使它们向后重复、循环，并从初始状态移动到最终状态。这些效果还有一个中间状态。关键帧指示动画序列中的给定时间处动画元素的呈现方式。

css悬停效果的类型

css悬停效果可以应用于文本、图像、视频、链接或按钮。以下是一些主要应用：

#1. 文本悬停效果

当您想要构建一个简约的网站时，这样的效果很合适。设计应该简单，但仍然能传达信息。它可以采用以下形式：

• 终端文本效果：这种效果模仿在文本处理器上输入。文字会闪烁，但速度应该适中，以便用户可以阅读。
• 文本动画：此效果中的文本可以向上、向下或向侧面移动。

#2. 链接悬停效果

一个典型的网站会有各种超链接，将用户重定向到不同的页面。随着网站的增长，此类链接不断增加。链接悬停效果可以采用以下形式：

• 更改链接颜色：将链接的颜色从蓝色更改为红色。
• 更改背景颜色：此效果会更改链接的背景颜色。
• 文本交换：此效果会更改链接图标的内容。

#3. 按钮悬停效果

按钮在网站中非常重要，因为它们可以让我们提交表格并访问网页的各个部分。按钮上的悬停效果可以通过以下方式实现：

• 文本颜色变化：在鼠标悬停时，显示“click me”按钮上的文本颜色可以从红色变为绿色。
• 背景颜色变化：html按钮默认是透明的，开发人员可以为这样的按钮添加背景颜色。在鼠标悬停时，背景颜色可以从棕色变为绿色。
• 弹跳效果：通过设计按钮在鼠标悬停时弹跳，可以增加用户的视觉吸引力。

#4. 图片悬停效果

• 图片切换：可以创建一个在鼠标悬停时切换的图片轮播。
• 淡入/淡出图片：这种效果可以在鼠标悬停时使图片更清晰。
• 测试切换：常见的是网站在图片上隐藏各种描述。例如，旅行网站可以在用户悬停后显示酒店详细信息。

现在我们可以为您的网站解释一些高雅的css悬停效果。

鼠标悬停时改变背景颜色

此效果可以应用于按钮、链接或网页上显示的文本。一旦鼠标的光标触碰到目标，背景颜色就会变化。

您可以按照以下步骤更改文本的背景颜色：

• 使用:hover伪类来实现您的目标
• 创建一个元素，如div、按钮或链接，在其中实现悬停效果。

这是一个实现这些效果的示例代码。

html文件

    

    

    

    

      

      



    

        悬停并看我改变！！！

      </div

css文件

div:hover {

    background-color: rgb(255, 0, 0); 

    width: 18rem;

    align-items: center;

    text-align: center;

  }

悬停前的输出为：

悬停后的输出为：

鼠标悬停时改变链接颜色

链接是网页上的重要元素，它们帮助我们从一个页面跳转到另一个页面。我们使用html 标签创建超链接。在鼠标悬停时改变链接颜色可以增加链接的可见性。

我们需要以下内容来演示这个效果：

• 在:head或:body标签上创建一个选择器标签
• 定义:hover伪类

您可以使用以下示例代码显示一个链接，在鼠标悬停时从绿色变为橙色。

html文件：

a {

    text-decoration: underline;

    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

    background-size: 100% 0.2em;

    background-repeat: no-repeat;

    background-position: 0 100%;

    transition: background-size 0.5s;

  }

  a:hover {

    background-size: 100% 100%;

  }

output before hover;

output after hover effect;

before hover;

after hover;

鼠标悬停时文本交换

鼠标悬停时文本交换是指当用户悬停在目标上方时，文本将与另一段内容或文本进行交换。一个完美的例子是网站上的“comments”链接。当您悬停时，链接文本可以变为“comment”。

要实现鼠标悬停时的文本交换，您需要以下内容：

• ::before 和 ::after 伪元素- 这些在悬停后创建一个单独的元素用于交换文本。
• :hover 伪元素，用于在悬停时改变内容的位置或可见性

以下是如何实现此效果的示例：

html 文件：

    

    

    

    

      

      



    99 comments

css 文件：

button { width: 10em } 

button { height: 3em } 

button:hover span { display: none } 

button:hover:before { content: "add a comment" }

before hover;

after hover;

具有出色悬停效果的网站

如果您想借用一些创意并获得灵感，以下是一些可以参考的网站。

#1. canva

canva 是设计界的重要名字，它帮助非设计师创建精美的设计。该网站具有令人赞叹的悬停效果，从主页到产品页面。主页上有一个暗模糊的背景。然而，在悬停时，背景变得清晰，图像变得可见。当您选择不同的设计模板时，还会出现其他悬停效果。

#2. haus

haus 是一个完美的示例，它实现了鼠标悬停时的下划线、文本交换以及鼠标悬停时背景颜色的变化。

#3. mainworks 

mainworks 为其悬停效果同时实现了动画和过渡效果。一些显著的效果包括鼠标悬停时的文本交换、文本颜色的变化以及鼠标悬停时文本和图像的放大。

结论

选择添加到您的网站上的悬停效果将取决于您的网站类型、技能、品味和偏好。一些网站，如艺术和优惠券平台，可能会欢迎超级华丽的悬停效果。另一方面，法律和医疗网站可能会选择最简化的悬停效果。
因此，您必须弄清楚适用于您的网站的效果。但是，请确保这些效果与您的品牌颜色相匹配。查看我们的最佳css资源来提升您的css技能。

相关