网站的 5 个经典 CSS 悬停效果 [2023]

大多数现代网站都使用层叠样式表 (CSS)。 一些站点使用基本的 CSS 特性,而另一些站点则使用高级特性来使他们的 Web 应用程序更具吸引力。

添加引人注目的效果可以提高您网站的点击率,激发用户采取行动,甚至可以增加用户在您网站上停留的时间。

在本文中,我们将讨论什么是 CSS 悬停效果,它们如何使您的网站引人注目,如何实现这些效果,并举例说明实现经典 CSS 悬停效果的网站。

什么是 CSS 悬停效果?

当网站用户使用他们的光标(鼠标指针)将鼠标悬停在元素上时,就会出现 CSS 悬停效果。 结果可以是颜色、文本或其他动画效果的变化。 将此类效果添加到网站以增强交互性并使其更易于导航。

CSS 悬停效果可以显示为过渡或动画。

过渡

此类效果允许您更改网页上元素的外观或行为。 但是,必须有一个触发器,例如用户将鼠标悬停在特定元素上。 转换在触发器之后从初始状态移动到最终状态。 转换仅运行一次,并且不允许您指定中间点。

动画

这些效果具有关键帧,允许它们向后重复、循环并从初始状态移动到最终状态。 这些影响也有一个中间状态。 关键帧指示动画元素在动画序列中的给定时间如何呈现。

CSS 悬停效果的类型

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

#1。 文本悬停效果

当你想建立一个简约的网站时,这种效果是合适的。 设计应该简单,但仍能传递信息。 它可以有以下几种形式:

  • 终端文本效果:此效果模仿在文本处理器上打字。 文字会闪烁,但速度应该足以让用户阅读。
  • 文本动画:此效果中的文本可以向上、向下或侧向齐平。

#2。 链接悬停效果

一个典型的网站会有各种超链接,将用户重定向到不同的页面。 随着网站的发展,此类链接不断增加。 链接悬停效果可以以这些形式出现;

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

#3。 按钮悬停效果

按钮在网站中很重要,因为它们允许我们提交表单并访问网页的各个部分。 按钮上的悬停效果可以通过以下形式实现:

  • 文本颜色变化:“点击我”按钮上的文本颜色可以在悬停时从红色变为绿色。
  • 改变背景颜色:默认情况下 HTML 按钮是透明的。 开发人员可以为此类按钮添加背景颜色。 悬停时,背景颜色可以从棕色变为绿色。
  • 弹跳效果:您可以通过将按钮设计为在悬停时弹跳来增加对用户的视觉吸引力。
  通过博客在线赚钱的 8 种方法

#4。 图片悬停效果

  • 交换图像:您可以创建在悬停时交换图像的轮播。
  • 淡入/淡出图像:当您将鼠标悬停在图像上时,这种效果会使图像更清晰。

测试交换:找到在图像上隐藏各种描述的网站是很常见的。 例如,旅游网站可以在用户悬停鼠标后显示酒店详细信息。

现在我们可以为您的网站解释一些经典的 CSS 悬停效果。

悬停时更改背景颜色

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

您可以在这些步骤中更改文本的背景;

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

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

HTML文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

      <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">

      </head>

<body>

    <div>

        Hover and see me change!!!!!

      </div

</body>

</html>

CSS文件

div:hover {

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

    width: 18rem;

    align-items: center;

    text-align: center;

  }

在悬停之前,out 将是;

悬停后,输出将是;

链接是网页上的重要元素,因为它们可以帮助我们从一个页面移动到另一个页面。 我们使用 HTML 标签来创建超链接。 在悬停时更改链接颜色会增加链接的可见性。

我们需要以下内容来证明这种效果:

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

您可以使用此示例代码来显示在悬停时从绿色变为橙色的链接。

HTML 文件:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

      <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">

      </head>

<body>

    <div>

        <a href="#">Hover over me and see the magic</a>

        </div

</body>

</html>

CSS 文件:

a:link {

    color: rgb(0, 255, 34);

  }

  a:hover {

    color: #ff8400;

  }

悬停前输出;

悬停效果后输出;

悬停时滑动突出显示

当用户悬停时,此效果会向内联链接添加框阴影。 链接的颜色将在此过程中更改。 为此,您可以按照以下步骤作为指导;

  • 在链接周围添加填充(类似 0 .25rem 的东西可以工作)
  • 添加类似值的边距。 这可以防止填充中断文本流。
  15 个聘请在线翻译的最佳翻译服务

您可以将其作为简单的 html 文件:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <a href="#">techblik.com</a>

      <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">

</head>

<body>

</body>

</html>

这可以是您的 CSS 文件;

a {

    box-shadow: inset 0 0 0 0 rgb(255, 21, 0);

    color: #ff4000;

    padding: 0 .25rem;

    margin: 0 -.25rem;

    transition: color .3s ease-in-out, box-shadow .3s ease-in-out;

  }

  a:hover {

    color: #fff;

    box-shadow: inset 200px 0 0 0 #ff4000;;

  }


  a {

    color: #ff4000;

    font-family: 'Poppins', sans-serif;

    font-size: 27px;

    font-weight: 700;

    line-height: 1.5;

    text-decoration: none;

  }

  body {

    display: grid;

   

  }

在悬停效果之前;

悬停效果后;

悬停时的彩虹下划线

此效果会在悬停时为文本添加多种颜色的下划线。

  • 使用:linear-gradient 伪类来创建不同颜色之间的平滑过渡。
  • 使用 :hover 伪类来实现你的目标。
  • 创建一个链接元素,您将在其中实现悬停效果。

这是在悬停时实现彩虹下划线的示例代码:

HTML 文件:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

      <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">

      </head>

<body>

    <div>

        <p>This is <a href="#">Rainbow</a> hover effect. </p> 

        </div

</body>

</html>

CSS 文件:

p {

  max-width: 800px;

  margin: auto 15%;

  line-height: 1.1;

  font-size: 78px;

  font-weight: 700;

  letter-spacing: .0125em;

  color: black;

}

a {

  display: inline-block;

  position: relative;

  text-decoration: none;

  color: inherit;

  z-index: 1;

}

a::after {

  content: '';

  position: absolute;

  left: 0;

  bottom: .07em;

  height: .1em;

  width: 100%;

  background: linear-gradient(110deg, #e1f549, #29d0be, #6cb8ea, #ff5959);

  z-index: -1;

  transition: height .25s cubic-bezier(.6,0,.4,1);

}

a:hover::after {

  height: .2em;

}

  p {

    font-size: 58px;

  }

悬停前;

  保护敏感数据的 9 个实用技巧

悬停后;

悬停时文本交换

测试交换是指当用户将鼠标悬停在目标上时文本与另一段内容或文本交换。 一个完美的例子是网站有一个“评论”链接。 悬停后,链接文本可以更改为“评论”。

要在悬停时实现文本交换,您需要以下内容:

  • ::before 和 ::after 伪元素——它们为悬停后要交换的文本创建一个单独的元素。
  • :hover 伪元素,在悬停时更改内容的位置或可见性

这是如何实现此效果的说明:

HTML 文件:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

      <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">

      </head>

<body>

    <button><span>99 comments</span></button>

</body>

</html>

CSS 文件:

button { width: 10em } 

button { height: 3em } 

button:hover span { display: none } 

button:hover:before { content: "Add a Comment" }

悬停前;

悬停后;

具有出色悬停效果的网站

如果您想借用想法并获得一些灵感,可以查看这些网站。

#1。 画布

Canva 在设计界是一个巨大的名字,因为它帮助非设计师创造美丽的设计。 这个网站有很棒的悬停效果,从主页到产品页面。 这一切都始于主页上的深色模糊背景。 但是,悬停时背景会清除,并且图像会变得可见。 当您选择不同的设计模板时,悬停效果也会出现。

#2。 豪斯

Haus 是一个完美的网站示例,它实现了悬停时的下划线、悬停时的文本交换以及悬停时更改背景颜色。

#3。 主要工程

Mainworks 为其悬停效果实现了动画和过渡。 一些值得注意的效果是在悬停时交换文本、更改文本颜色以及在悬停时缩放文本和图像。

结论

添加到您的网站的悬停效果的选择将取决于您的网站类型、技能、品味和偏好。 一些网站,例如艺术和优惠券平台,可能会欢迎超炫的悬停效果。 另一方面,法律和医疗网站可能会选择最小的悬停效果。
因此,您必须弄清楚什么对您的网站有效。 但是,请确保这些效果与您的品牌颜色一致。 查看我们最好的 CSS 资源来提高您的 CSS 技能。