📌  相关文章
📜  使用 HTML 和 CSS 在悬停时缩小文本(1)

📅  最后修改于: 2023-12-03 15:22:11.981000             🧑  作者: Mango

使用 HTML 和 CSS 在悬停时缩小文本

在网页设计中，我们常常需要制作一些动态的效果，比如当鼠标悬停在某个元素上时，该元素会发生一些动态变化，如变色、缩小等。本文将介绍如何使用 HTML 和 CSS 在悬停时缩小文本的方法。

HTML 代码

我们先创建一个包含文本的 HTML 元素，如下所示：

<p>鼠标悬停时，该文本会缩小</p>
CSS 代码

接下来，我们需要给上述 HTML 元素添加一些 CSS 样式，如下所示：

p {
  font-size: 20px;
  transition: all 0.3s;
}

p:hover {
  font-size: 16px;
}

解释一下上述代码：

  • font-size: 20px;：该样式用于设置文本的字号为 20 像素；
  • transition: all 0.3s;：该样式用于设置动态变化的过渡效果，all 表示所有变化都带有过渡效果，0.3s 表示过渡时间为 0.3 秒；
  • p:hover：该样式表示当鼠标悬停在 p 元素上时，会应用该样式中的属性。

其中，我们给 p:hover 添加了 font-size: 16px; 样式，表示当鼠标悬停在 p 元素上时，文本的字号会从 20 像素缩小到 16 像素。

完整代码

下面是完整的 HTML 和 CSS 代码：

<!DOCTYPE html>
<html>
  <head>
    <title>使用 HTML 和 CSS 在悬停时缩小文本</title>
    <style>
      p {
        font-size: 20px;
        transition: all 0.3s;
      }
      p:hover {
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <p>鼠标悬停时，该文本会缩小</p>
  </body>
</html>
总结

本文介绍了如何使用 HTML 和 CSS 在悬停时缩小文本的方法，我们可以通过修改 CSS 样式来实现更多动态效果。这些动态效果既可以增强页面的交互性，也可以提升用户的体验。