使用 CSS 变量实现 Hover 效果的字体大小动态调整-html教程-PHP中文网

使用 CSS 变量实现 Hover 效果的字体大小动态调整

心靈之曲

发布： 2025-09-28 11:41:14

原创

518人浏览过

使用 css 变量实现 hover 效果的字体大小动态调整

本文介绍了如何使用 CSS 变量来实现鼠标悬停时字体大小的动态调整。通过定义 CSS 变量，并在不同媒体查询中设置不同的变量值，可以轻松地在不同屏幕尺寸下实现字体大小的响应式变化。同时，利用 calc() 函数，可以在 :hover 伪类中动态计算字体大小，从而实现平滑的过渡效果。

CSS 变量（也称为自定义属性）为我们提供了一种强大的方式来管理和复用 CSS 值。通过结合 CSS 变量和 :hover 伪类，我们可以轻松实现鼠标悬停时字体大小的动态调整，从而提升用户体验。

基本原理

核心思想是：

立即学习“前端免费学习笔记（深入）”；

定义 CSS 变量： 使用 :root 伪类定义全局 CSS 变量，用于存储字体大小的初始值。
媒体查询调整变量： 在不同的媒体查询中，根据屏幕尺寸调整 CSS 变量的值，实现响应式布局。
应用变量到元素： 使用 var() 函数将 CSS 变量应用到需要控制字体大小的元素上。
Hover 效果动态调整： 在元素的 :hover 伪类中，使用 calc() 函数结合 CSS 变量来动态计算新的字体大小。

具体步骤

以下是一个详细的示例，展示了如何使用 CSS 变量来实现鼠标悬停时 <h1> 标题字体大小的动态调整：

定义 CSS 变量：
```
:root {
  --font-size: 1.25rem;
}
```
登录后复制
这里，我们使用 :root 伪类定义了一个名为 --font-size 的 CSS 变量，并将其初始值设置为 1.25rem。
媒体查询调整变量：

火龙果写作
用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情
```
@media only screen and (max-width: 595px) {
  :root {
    --font-size: 1rem;
  }
}
```
登录后复制
在这个媒体查询中，当屏幕宽度小于或等于 595px 时，我们将 --font-size 的值修改为 1rem。这使得字体大小在较小的屏幕上更小，提高了可读性。
应用变量到元素：
```
h1 {
  font-size: var(--font-size);
}
```
登录后复制
我们使用 var() 函数将 --font-size 变量的值应用到 <h1> 标题的 font-size 属性。这意味着 <h1> 标题的字体大小将根据 --font-size 变量的值进行动态调整。
Hover 效果动态调整：
```
h1:hover {
  font-size: calc(var(--font-size) * 1.15);
}
```
登录后复制
在这个 :hover 伪类中，我们使用 calc() 函数将 --font-size 变量的值乘以 1.15。这意味着当鼠标悬停在 <h1> 标题上时，其字体大小将增大 15%。

完整代码示例

<!DOCTYPE html>
<html>
<head>
<style>
:root {
  --font-size: 1.25rem;
}

@media only screen 
  and (max-width: 595px) {
    :root {
      --font-size: 1rem;
    }
}

h1 {
  font-size: var(--font-size);
}

h1:hover {
  font-size: calc(var(--font-size) * 1.15);
}
</style>
</head>
<body>

<h1>Just a Test</h1>

</body>
</html>

登录后复制

注意事项