【开源宝藏】30天学会CSS - DAY12 第十二课 从左向右填充的文字标题动画
用伪元素搞定文字填充动效：一行 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 动效。欢迎点赞、收藏、转发支持！
☕ 支持作者
如果你觉得这篇文章对你有帮助，不妨请我喝杯咖啡吧！