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

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

article 2026/1/30 13:55:45

用伪元素搞定文字填充动效：一行 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 动效。欢迎点赞、收藏、转发支持！

☕ 支持作者

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

相关文章：

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

用伪元素搞定文字填充动效&#xff1a;一行 JS 不写&#xff0c;效果炸裂 你是否曾经在设计页面标题时&#xff0c;觉得纯文字太寡淡&#xff1f;或者想做一个有动感的文字特效&#xff0c;但又不想引入 JS 甚至 SVG&#xff1f; 在这篇文章中&#xff0c;我们将通过 一段不到…...

编程日记 2026/1/22 5:08:38

nginx或tengine服务器,配置HTTPS下使用WebSocket的线上环境实践!

问题描述&#xff1a; HTTPS 下发起WS连接&#xff0c;连接失败&#xff0c;Chrom 浏览器报错。 socket.js:19 Mixed Content: The page at https://app.XXX.com was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint ws://172.16.10.80:903…...

编程日记 2026/1/30 6:00:33

WSA（Windows 安卓子系统）过检测教程

windows安卓子系统WSA的root和magisk的安装教程 安卓子系统WSLWSA的rootmagisk安装 WSA&#xff08;Windows 安卓子系统&#xff09;过检测的方法与思路 一、引言 Windows 安卓子系统&#xff08;WSA&#xff09;为 Windows 用户提供了在电脑上运行安卓应用的便利。然而&…...

编程日记 2025/11/12 20:47:04

蓝桥杯 B3620 x 进制转 10 进制

题目描述 给一个小整数 x 和一个 x 进制的数 S。将 S 转为 10 进制数。对于超过十进制的数码&#xff0c;用 A&#xff0c;B&#xff0c;… 表示。 输入格式 第一行一个整数 x; 第二行一个字符串 S。 输出格式 输出仅包含一个整数&#xff0c;表示答案。 输入输出样例 …...

编程日记 2025/11/16 1:14:41

【Oracle篇】跨字符集迁移：基于数据泵的ZHS16GBK转AL32UTF8全流程迁移

&#x1f4ab;《博主主页》&#xff1a;奈斯DB-CSDN博客 &#x1f525;《擅长领域》&#xff1a;擅长阿里云AnalyticDB for MySQL(分布式数据仓库)、Oracle、MySQL、Linux、prometheus监控&#xff1b;并对SQLserver、NoSQL(MongoDB)有了解 &#x1f496;如果觉得文章对你有所帮…...

编程日记 2026/1/30 1:46:16

Qt子模块的功能介绍

一、Qt 主要子模块的功能介绍 1. 核心模块 模块名称功能描述QtCore核心非GUI功能（信号槽、线程、文件IO、容器类、JSON/XML处理等）QtGui基础图形绘制（窗口系统集成、OpenGL抽象、图像处理、字体管理等）QtConcurrent高级多线程API（并行计算框架，如QtConcurrent::run）QtN…...

编程日记 2025/10/31 2:49:20

FRP练手：hello，world实现

方案一&#xff1a;使用 Flask&#xff08;推荐&#xff09; from flask import Flaskapp Flask(__name__)app.route(/) def hello_world():return "你好啊世界"if __name__ __main__:# 监听所有网络接口&#xff08;0.0.0.0&#xff09;&#xff0c;端口 3344app.…...

编程日记 2026/1/21 21:20:44

《深入探秘：分布式软总线自发现、自组网技术原理》

在当今数字化浪潮中&#xff0c;分布式系统的发展日新月异&#xff0c;而分布式软总线作为实现设备高效互联的关键技术&#xff0c;其自发现与自组网功能宛如打开智能世界大门的钥匙&#xff0c;为多设备协同工作奠定了坚实基础。 分布式软总线的重要地位 分布式软总线是构建…...

编程日记 2025/10/24 8:30:49

西门子S7-1200PLC 工艺指令PID_Temp进行控温

1.硬件需求&#xff1a; 西门子PLC&#xff1a;CPU 1215C DC/DC/DC PLC模块&#xff1a;SM 1231 TC模块 个人电脑&#xff1a;已安装TIA Portal V17软件 加热套&#xff1a;带加热电源线以及K型热电偶插头 固态继电器&#xff1a;恩爵 RT-SSK4A2032-08S-F 其他&#xff1…...

编程日记 2026/1/27 23:48:50

提升Windows安全的一些措施

由简单到复杂&#xff0c;仅供参考 一、杀毒软件&#xff1a; 1、杀毒能力&#xff1a; https://haokan.hao123.com/v?vid3883775443252827335&pdhaokan_share 2、使用注意&#xff1a; 一台主机只安装一个杀毒软件就可以了 杀毒软件会误报&#xff0c;造成正常文件…...

编程日记 2025/10/28 1:59:31

Jupyter notebook定制字体

一、生成配置文件 运行Anaconda Powershell Prompt终端&#xff0c;输入下面一行代码&#xff1a; jupyter notebook --generate-config 将生成文件“C:\Users\XXX\.jupyter\jupyter_notebook_config.py”&#xff0c;XXX为计算机账户名字。 二、修改配置文件 c.NotebookAp…...

编程日记 2025/11/14 13:53:42

内存分配中的堆（Memory Heap）详解

在计算机科学中&#xff0c;"堆"这个术语确实容易让人混淆&#xff0c;因为它同时用于描述两种完全不同的概念&#xff1a;数据结构中的堆和内存管理中的堆。上次我们讨论了数据结构中的堆&#xff0c;今天我将详细解释内存分配中的堆&#xff08;Memory Heap&#x…...

编程日记 2025/9/8 10:13:33

vant4+vue3上传一个pdf文件并实现pdf的预览。使用插件pdf.js

注意下载的插件的版本"pdfjs-dist": "^2.2.228", npm i pdfjs-dist2.2.228 然后封装一个pdf的遮罩。因为pdf文件有多页&#xff0c;所以我用了swiper轮播的形式展示。因为用到移动端&#xff0c;手动滑动页面这样比点下一页下一页的方便多了。 直接贴代码…...

编程日记 2026/1/23 14:01:02

JS | 函数柯里化

函数柯里化&#xff08;Currying&#xff09;&#xff1a;将一个接收多个参数函数&#xff0c;转换为一系列只接受一个参数的函数的过程。即 逐个接收参数。 例子&#xff1a; 普通函数&#xff1a; function add(a, b, c) {return a b c; } add(1, 2, 3); // 输出 6柯里化…...

编程日记 2025/9/8 17:06:40

软件工程基础之设计模式

目录 单例模式（Singleton Pattern）工厂方法模式（Factory Method Pattern）抽象工厂模式（Abstract Factory Pattern）原型模式（Prototype Pattern）适配器模式（Adapter Pattern）单例模式（Singleton Pattern） 确保一个类只有一个实例，并提供一个全局访问点。应用场景：…...

编程日记 2025/9/8 17:25:28

2025 数字中国创新大赛数字安全赛道数据安全产业积分争夺赛初赛-东部赛区WriteUp

2025 数字中国创新大赛数字安全赛道数据安全产业积分争夺赛初赛-东部赛区WriteUp 数据安全:ez_upload(60分)&#xff1a; 模型安全&#xff1a;数据分析&#xff1a;溯源与取证&#xff1a;1-1&#xff1a;1-2&#xff1a; 数据社工&#xff1a;2-2:2-3:2-4: 数据跨境&#xff…...

编程日记 2026/1/10 4:21:08

2025 年网络安全终极指南

我们生活在一个科技已成为日常生活不可分割的一部分的时代。对数字世界的依赖性日益增强的也带来了更大的网络风险。 网络安全并不是IT专家的专属特权&#xff0c;而是所有用户的共同责任。通过简单的行动&#xff0c;我们可以保护我们的数据、隐私和财务&#xff0c;降低成为…...

编程日记 2026/1/23 19:59:23

1.6-抓包技术（Burp Suite\Yakit抓包\Web、APP、小程序）

1.6-抓包技术&#xff08;Burp Suite\Yakit抓包\Web、APP、小程序&#xff09; 如果要使用抓包软件&#xff0c;基本上第一步都是要安装证书的。原因如下&#xff1a; 客户端&#xff08;浏览器或应用&#xff09;会检测到证书不受信任&#xff0c;并弹出 证书错误&#xff0…...

编程日记 2026/1/22 19:43:36

图解力扣回溯及剪枝问题的模板应用

文章目录 选哪个的问题17. 电话号码的字母组合题目描述解题代码图解复杂度 选不选的问题78. 子集题目描述解题代码图解复杂度 两相转化77. 组合题目描述解题代码法一&#xff1a;按选哪个的思路法二&#xff1a;按选不选的思路 图解选哪个&#xff1a;选不选 复杂度 选哪个的问…...

编程日记 2026/1/19 6:14:06

Elasticsearch 8.X 如何利用嵌入向量提升搜索能力?

众所周知&#xff0c;Elasticsearch 是一个非常流行的搜索引擎&#xff0c;因为它速度快、扩展性强&#xff0c;尤其擅长全文搜索。 近两年&#xff0c;向量嵌入&#xff08;Vector Embedding&#xff09;技术的引入&#xff0c;让 Elasticsearch 在处理高级搜索场景时变得更强…...

编程日记 2026/1/19 2:55:14

MySQL体系架构（一）

1.1.MySQL的分支与变种 MySQL变种有好几个，主要有三个久经考验的主流变种：Percona Server，MariaDB和 Drizzle。它们都有活跃的用户社区和一些商业支持，均由独立的服务供应商支持。同时还有几个优秀的开源关系数据库，值得我们了解一下。 1.1.1.Drizzle Drizzle是真正的M…...

编程日记 2026/1/29 13:56:19

【Docker项目实战】使用Docker部署ToDoList任务管理工具

【Docker项目实战】使用Docker部署ToDoList任务管理工具 一、ToDoList介绍1.1 ToDoList简介1.2 ToDoList主要特点二、本次实践规划2.1 本地环境规划2.2 本次实践介绍三、本地环境检查3.1 检查Docker服务状态3.2 检查Docker版本3.3 检查docker compose 版本四、下载ToDoList镜像…...

编程日记 2026/1/27 4:39:48

深度强化学习基础 0：通用学习方法

过去自己学习深度强化学习的痛点&#xff1a; 只能看到各种术语、数学公式勉强看懂&#xff0c;没有建立清晰且准确关联 多变量交互关系浮于表面&#xff0c;有时候连环境、代理控制的变量都混淆 模型种类繁多&#xff0c;概念繁杂难整合、对比或复用&#xff0c;无框架分析所…...

编程日记 2026/1/27 9:45:30

Traefik应用：配置容器多个网络时无法访问问题

Traefik应用&#xff1a;配置容器多个网络时无法访问问题 介绍解决方法问题原因&#xff1a; **容器多网络归属导致 Traefik 无法正确发现路由规则**。解决方案方法 1&#xff1a;将应用容器 **仅连接** 到 traefik-public 网络方法 2&#xff1a;显式指定 Traefik 监听的网络 …...

编程日记 2025/8/24 1:08:28

虚幻5的C++调试踩坑

本地调试VS附加调试 踩坑1 预编译版本的UE5没有符号文件&#xff0c;无法调试源码 官方代码调试所需要的符号文件bdp需要下载导入。我安装的5.5.4是预编译版本&#xff0c;并非ue5源码。所以不含bdp文件。需要调试官方代码则需要通过EPIC中下载安装。右键UE版本&#xff0c;打…...

编程日记 2026/1/27 10:28:25

react 中将生成二维码保存到相册

需求&#xff1a;生成二维码&#xff0c;能保存到相册 框架用的 react 所以直接 qrcode.react 插件&#xff0c;然后直接用插件生成二维码&#xff0c;这里一定要写 renderAs{‘svg’} 属性&#xff0c;否则会报错&#xff0c;这里为什么会报错&#xff1f;&#xff1f;&#…...

编程日记 2025/11/26 10:35:17

通信协议详解（十）：PSI5 —— 汽车安全传感器的“抗干扰狙击手”

一、PSI5是什么&#xff1f; 一句话秒懂 PSI5就像传感器界的“防弹信使”&#xff1a;在汽车安全系统&#xff08;如气囊&#xff09;中&#xff0c;用两根线同时完成供电数据传输&#xff0c;即便车祸时线路受损&#xff0c;仍能确保关键信号准确送达&#xff01; 基础概念…...

编程日记 2026/1/19 23:46:46

C语言【模仿strcpy】

题目 模仿strcpy 思路&#xff08;注意事项&#xff09; 注意需要在复制的字符串结尾加\0表示字符串的终止 纯代码 #include<stdio.h>void cpy(const char *a, char *b){int i 0;while (a[i] ! \0){b[i] a[i];i ;}b[i] \0; } int main(){char a[] "HELLO&quo…...

编程日记 2025/11/19 22:53:58

从零开始学Python游戏编程18-函数3

《从零开始学Python游戏编程17-函数2》中&#xff0c;通过代码重构的方式将游戏的主要代码写入到自定义函数runGame()中。对于runGame()中的代码&#xff0c;可以继续对其进行重构&#xff0c;以达到简化代码结构的目的。 1 自定义函数askPlayer() 1.1 函数作用 自定义函数a…...

编程日记 2026/1/19 22:55:13

Spring事务传播机制

Spring 事务传播机制定义了在多个事务方法相互调用时&#xff0c;事务如何在这些方法间传播。它决定了一个事务方法调用另一个事务方法时&#xff0c;新的事务是如何开启、是否要加入已有的事务等情况。Spring 提供了 7 种事务传播行为&#xff0c;下面是详细介绍。 解释说明&…...

编程日记 2026/1/28 20:53:52