当前位置：首页 > news >正文

【开源宝藏】30天学会CSS - DAY12 第十二课从左向右填充的文字标题动画

news 2025/8/13 13:08:16

用伪元素搞定文字填充动效：一行 JS 不写，效果炸裂

你是否曾经在设计页面标题时，觉得纯文字太寡淡？或者想做一个有动感的文字特效，但又不想引入 JS 甚至 SVG？

在这篇文章中，我们将通过 一段不到 20 行的 CSS，教你如何利用 ::before 和 hover，打造一个可以“从左向右填充的文字标题动画”。
它不仅无依赖、无 JS，还能在所有现代浏览器流畅运行，而且使用的技巧非常适合在你以后的项目中灵活复用。
在这里插入图片描述

🎯 最终效果预览

当你将鼠标悬停在下方文字上时，它会从半透明变为实心颜色，并从左向右填充：

#30diasdeCSS

👨‍🏫 一步步实现过程

✅ 第一步：写出基础 HTML 结构

我们先写一个最简单的 HTML 页面：

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Efeito preenchimento</title>
  </head>
  <body>
    <h1>#30diasdeCSS</h1>
  </body>
</html>

✅ 第二步：让文字居中显示在页面中央

body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: sans-serif;
}

这段 CSS 使用了 flex 布局将页面内容垂直水平居中。

✅ 第三步：美化文字标题

h1 {
  margin: 0;
  padding: 0;
  font-family: verdana;
  font-size: 120px;
  color: rgba(255, 99, 71, 0.336); /* 半透明橘色 */
  text-transform: uppercase;
  position: relative;
}

position: relative 是为了后续添加伪元素叠在文字上。

✅ 第四步：添加 ::before 伪元素实现填充动画的底层结构

h1::before {
  content: "#30diasdeCSS";
  position: absolute;
  top: 0;
  left: 0;
  color: tomato; /* 实心颜色 */
  width: 0%;
  overflow: hidden;
  transition: all 0.6s;
}

content 保持文字一致；
width: 0% + overflow: hidden 让文字初始被隐藏；
transition 控制动画。

✅ 第五步：hover 时展开填充动画

h1:hover::before {
  width: 100%;
}

当鼠标悬停时，伪元素从 width: 0% 变成 100%，完成从左到右的填充效果。

🧠 技术原理解读

伪元素 ::before：用来叠加同样的文字；
定位 + overflow: hidden：模拟从左到右的“滑入”遮罩；
transition 平滑动画：只需添加一次。

💡 延伸练习建议

改变颜色、字体、字号，自定义样式；
改为 ::after 实现反向动画；
给文字添加渐变色背景（background-clip: text）增强视觉感；
鼠标悬停之外，还可以结合滚动触发效果。

✅ 总结

这个文字填充动效虽然简单，但蕴含多个 CSS 技巧，非常适合初中高级前端练手。

你可以快速把它集成到任何页面标题、副标题、按钮或品牌 Logo 上，让页面更有“高级感”。

下次我们会继续拆解更多 CSS 动效。欢迎点赞、收藏、转发支持！

☕ 支持作者

如果你觉得这篇文章对你有帮助，不妨请我喝杯咖啡吧！

查看全文

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.dtcms.com/a/115105.html 如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！