纯CSS3 Loading文字动效实战：从@keyframes到可复用组件-北京尧图网络

简介一套基于纯CSS3实现的Loading文字加载动效源码面向前端开发者和网页设计人员适用于页面加载、数据请求等待等需要明确的过渡场景。它不依赖JavaScript实现核心动画而是利用CSS3的animation属性让文字产生上下滚动与字符拆分效果从而缓解用户等待焦虑同时降低页面性能压力。资源压缩包仅7KB共7个文件包括3个CSS样式文件、2个JS辅助文件、1个HTM页面和1个HTML页面CSS部分负责动画定义与拆分样式JS文件辅助完成文字拆分与交互控制文件结构一目了然方便直接套用或改造。目前已有281人学习下载。借助这份源码可以系统理解animation-name、animation-duration、animation-timing-function、animation-delay、animation-direction、animation-iteration-count、animation-fill-mode和animation-play-state这八个关键子属性的协同方式并学会借助splitting工具快速实现字符级动效无论是入门CSS动画还是寻找轻量加载动效模板都能从中获得可直接落地的代码与调参思路。1. 纯 CSS3 Loading 文字动效为什么几行样式表比一张 GIF 更值做后台项目时页面加载的时候总要给用户一个回应转圈、进度条、或者一行“加载中”文字。纯 CSS3 Loading 文字加载动效就是针对后者的一种实现不依赖任何动画库不产生额外图片请求文字内容、颜色、速度全部由 CSS 控制。一套做下来体积也就几 KB比 GIF 干净比视频动效轻量更关键的是它在任何分辨率下都不会糊深色浅色主题都能自适应。这套源码包的定位很实在解决“加载提示太丑”的问题。无论你是做管理后台、移动端 H5还是个人网站的落地页只要需要用文字告诉用户“正在加载”都能直接用。配合少量 JS 常用代码可以把动效控制得非常精确——什么时候出现、什么时候消失、加载失败时显示什么文本都由你说了算。下面我从原理拆到实现把里面值得注意的边界和坑一个一个讲清楚。2. 从 keyframes 拆起逐字显现、波纹穿透、遮罩扫过的实现与选型2.1 一个动画的最小骨架keyframes 和 animation 属性组所有 CSS3 文字动效的核心都绕不开keyframes。你以为它只是“关键帧”实际上它是一个微型状态机定义动画从头到尾所有关键时刻的样式浏览器按时间插值自动补全中间帧。一个最简单不过的上下弹跳动画长这样keyframes loading-bounce { 0% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-0.5em); opacity: 1; } 100% { transform: translateY(0); opacity: 0.4; } } .loading-text span { display: inline-block; animation: loading-bounce 1.2s ease-in-out infinite; }这里的逻辑很直白0%是起点文字在原位且半透明30%是整个动画的最高点文字上移0.5em且完全不透明100%回到起点。注意我特意用了translateY而没用top因为transform只触发合成器工作不触发 layout 重排这点在后面排查卡顿时会再提到。animation是多个属性的简写在这一行里同时定义了三样东西动画名、时长、缓动函数。但真正让文字动效出彩的是另外几个经常被忽略的属性。animation-delay控制每个字符的启动时间把若干个字符的 delay 错开就形成了“波浪”animation-direction设为alternate时动画会在正放和倒放之间来回适合做呼吸感animation-fill-mode决定动画开始前和结束后用哪一帧的样式。这四个属性加上iteration-count、play-state基本就是所有 CSS 动效的完整工具箱。2.2 逐字显现用 delay 让每个字排队进场逐字显现是最常见的 Loading 文字效果做起来也最直观。把每个字符单独包一个span给每个 span 设置递增的animation-delay让它们按顺序做同一套动画。比如四个字“加载中”第一个字延迟 0s第二个延迟 0.15s第三个延迟 0.3s依次类推.typing-loader span { display: inline-block; opacity: 0; animation: char-in 1s ease forwards; } .typing-loader span:nth-child(1) { animation-delay: 0s; } .typing-loader span:nth-child(2) { animation-delay: 0.15s; } .typing-loader span:nth-child(3) { animation-delay: 0.3s; } .typing-loader span:nth-child(4) { animation-delay: 0.45s; } keyframes char-in { 0% { opacity: 0; transform: translateY(0.3em); } 100% { opacity: 1; transform: translateY(0); } }这段代码里有个容易被忽略的细节opacity: 0写在span上是“动画开始前”的样子forwards则让动画结束后保留100%那帧的样式。如果忘了写forwards动画播完会瞬间跳回透明状态感官上就是文字闪一下没了这类坑在现实中特别常见。如果你的 Loading 文字不是固定四五个字而是动态传入的延迟不会写死而是按序号计算。常见做法是在 JS 渲染字符时直接内联styleanimation-delay: calc(0.15s * var(--i))配合--i变量递减代码整洁且不污染 CSS 文件。2.3 遮罩扫过不碰文字本身用一层渐变盖上去逐字显现适合“打字机”风格但有些场景需要更强的视觉冲击比如文字上加一道高光扫过去。这种效果的核心思路是文字本身不动动的是覆盖在文字上面的一层遮罩。利用background-clip: text配合背景位移动画能实现“文字发光被擦拭”的感觉.sweep-loader { font-size: 2rem; font-weight: 700; color: #666; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(90deg, #666 0%, #1677ff 50%, #666 100%); background-size: 200% 100%; animation: sweep 1.5s linear infinite; } keyframes sweep { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } }这段的原理比较容易绕晕我拆开说文字设置了透明背景、渐变填充和background-clip: text后背景只在文字形状内部可见。接下来把background-size放大到 200%再通过background-position让渐变左右平移就形成了高光从左扫到右的效果。background-position的百分比计算逻辑和普通定位不一样它计算的是“图片的某个点对应容器某个点”当background-size是 200% 时background-position从 0% 走到 100% 意味着完整的位移。上面我让它走到-200%是为了让移动方向和正向一致这也是玄学成分最高的参数之一。遇到扫光方向反了时不用改动画先检查起始 background-position 和结束值方向是否互补通常能解决。2.4 为什么选 CSS3 而不是 GIF、APNG 或动画库这里做一个不走套路的选型对比GIF 是最常见的加载图格式但缺陷很明显8 位色深导致颜色有肉眼可见的色阶半透明边缘处理差放在深色背景上一圈白边框直接毁掉页面质感。APNG 解决了透明问题但体积大文件动辄几百 KB。Lottie 效果上限高但要引入 JSON 解析库配置成本太大小场景杀鸡用牛刀了。CSS3 的方案在加载时序上也有天然优势图片加载是页面资源请求的一部分存在等待时间CSS 动画没有额外网络请求样式表已经在渲染时一并到达。需要修改颜色的时候GIF 必须回到设计工具里导出新文件CSS 动效改一个color或background-image就能生效。配合 CSS 变量运行时换一套主题色甚至不需要改文件。3. 一套可复现的文字加载动效HTML、CSS 与 JS 收放状态的最小闭环3.1 HTML 结构给每个字一个可独立动画的包裹层前面讲了动画原理这一章直接给一套完整可复用的源码实现。为了兼容“JS 特效”这个关键词我会把浏览器的加载提示、按钮的 loading 状态、请求过程中的占位提示都覆盖到。先看 HTML 结构。动效要作用于单个字符所以每个字符和点号都单独用span包裹div classloader idpageLoader rolestatus aria-label加载中 span classloader-char加/span span classloader-char载/span span classloader-char中/span span classloader-char loader-dot./span span classloader-char loader-dot./span span classloader-char loader-dot./span /div这里做了三件事。第一每个字符依赖span才能独立位移和延迟如果直接把整个文字串放在一个元素里逐字动画就无从谈起。第二rolestatus给读屏软件明确的“状态变化”信号这是很多前端会漏掉的细节。第三三个.loader-dot点号复用同一套样式后面可以让它们单独做省略号循环这是“加载中”最常见的信息表达方式。3.2 CSS 动画主体弹跳加光晕外加三个分隔点的独立节奏完整的 CSS 分成三块容器样式、字符动画、分隔点动画。我把它写成一个可直接粘贴的完整片段:root { --loader-duration: 1.4s; /* 单字符周期 */ --loader-distance: 0.4em; /* 弹跳高度 */ --loader-color: #1677ff; /* 主题色 */ } .loader { display: flex; gap: 0.05em; font-size: 1.5rem; color: var(--loader-color); } .loader-char { display: inline-block; animation: char-bounce var(--loader-duration) ease-in-out infinite; } .loader-dot { animation-name: dot-pulse; animation-duration: var(--loader-duration); animation-timing-function: ease-in-out; animation-iteration-count: infinite; } keyframes char-bounce { 0%, 100% { transform: translateY(0); text-shadow: 0 0 rgba(22, 119, 255, 0); } 35% { transform: translateY(calc(-1 * var(--loader-distance))); text-shadow: 0 0.3em 0.6em rgba(22, 119, 255, 0.45); } 60% { transform: translateY(0); } } keyframes dot-pulse { 0%, 20% { opacity: 0.2; } 50% { opacity: 1; transform: scale(1.2); } 80%, 100% { opacity: 0.2; transform: scale(1); } }char-bounce里用了两层技巧位移用translateY由容器 flex 布局保证不产生换行text-shadow在最高点展开形成“弹跳时带光晕”的视觉。calc(-1 * var(--loader-distance))这行不加括号的话整个表达式会失效实际写代码时尤其要注意乘号两侧不能省略。分隔点动画单独走dot-pulse它和字符动画使用同一周期但不同缓动。这样三个点不会跟随文字做上下跳而是原地明灭缩放。很多现成效果的“翻车点”就在这把点也套进同一个动画名出来的画面上三个点跟着文字一起飞观感特别乱。3.3 用 JS 控制加载态出现、结束与隐藏后的清理CSS 把动画跑起来了但页面不能一直显示“加载中”。这段 JS 负责在需要时挂载容器结束后移除避免动画在不可见状态下持续消耗性能const loader document.getElementById(pageLoader); function showLoader(text 加载中) { // 如果传入自定义文案直接替换字符 loader.textContent text; loader.style.display flex; requestAnimationFrame(() loader.classList.add(is-active)); } function hideLoader() { loader.classList.remove(is-active); // 用 setTimeout 等一个动画周期避免闪没 setTimeout(() { loader.style.display none; }, 300); } window.__showLoader showLoader; window.__hideLoader hideLoader;requestAnimationFrame的加特是血泪换来的如果在 display 由 none 变为 flex 的同一个执行栈里直接加动画类部分浏览器会把两个样式的变更合并动画不会播放。下一帧再添加能确保动画从头开始。隐藏时我留了 300ms 宽限期刚好覆盖一个动画周期的一部分让结束动作看起来平滑。textContent直接替换字符串的做法省事但注意替换之后原来的三个小数点没有了。真正要用省略号效果时要么在 HTML 里保留点号标签要么在 JS 里用模板字符串重新拼一段字符片段两种方案都行。依赖点号动画的页面我通常选择读 HTML 里的占位结构只改前三个字。4. 参数怎么调才不翻车速度、延迟、颜色与文字内容改动的四个细节4.1 参数速查表从 0.8s 到 2s 的观感变化CSS 动画的参数系统并不复杂但乱调一通会得出很“土”的效果。下面这张表是我在几个项目里实测出来的推荐区间可以直接做初始值再基于手感微调参数项推荐区间过快的表现过慢的表现单字符动画时长0.8s – 2s眼花紧张用户以为卡死字符延迟间隔0.05s – 0.2s排队感消失文字被拆散弹跳高度0.2em – 0.5em夸张不专业几乎看不到光晕模糊半径0.3em – 0.6em文字发虚失去存在感无限循环次数infinite 或 3–5 次耗电且干扰阅读提前结束信息不完整特别注意表格里的第二行“字符延迟间隔”。延迟间隔和单字符动画时长需要联动调整常见做法是把间隔设为总时长的 10% 到 15%。比如动画时长 1.4s那延迟就是在 0.14s 到 0.21s 之间取一个值四五个字符排下来整体波浪才协调。如果你只调时长不调延迟延迟占比会变小字符差不多同时起跳波浪感直接消失。4.2 文字内容改动的三个注意点字符数、中英文混排、容器宽度Loading 文字不会永远是“加载中”用户可能传“请稍候”也可能传英文 “Loading”。改动时最容易出问题的是字符数和换行。第一个注意点字符数变了容器宽度也要跟着变。因为每个字符是 inline-block宽度不够就直接换行动效会从一排变成两排。好的防法是给.loader加white-space: nowrap同时在容器上预留宽度安全位或者直接使用flex布局这是我前面的代码里已经写过的处理方式。第二个注意点中英文混排时0.4em这类相对单位是安全的因为 em 是相对于当前元素字号计算的。中文一个字占一个 em英文字符通常只有 0.5em 左右弹跳高度看起来会不一样。要让英文动效观感统一把“正在加载”和“Loading”分开两套样式或者统一用固定像素值。第三个注意点text-shadow在动画关键帧里写了一次后面如果你把文字颜色改成灰白色光晕颜色仍是主题蓝视觉会冲突。要么把光晕色也提取为变量要么把光晕放到::before伪元素里避免和文字颜色耦合。4.3 场景扩展按钮内嵌、弹窗复用、多主题切换同一套动效不只可以放在页面中央也可以塞进按钮和弹窗。放进按钮时需要控制动效的字号与按钮高度匹配.btn-loading { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; } .btn-loading .loader { --loader-distance: 0.25em; font-size: 1rem; color: currentColor; }这里把--loader-distance覆写成 0.25em是为了在较低的按钮高度里不至于让字符超出按钮上边界。颜色用currentColor自动继承按钮文字色这样按钮是红色主题时加载动画也自动变红不需要额外写主题变量。如果项目里有多套主题建议把颜色和时长全部收敛到:root的变量运行时通过给容器加一个>supports (-webkit-background-clip: text) { .sweep-loader { -webkit-background-clip: text; background-clip: text; } }这个思路也适用于其他新特性。先保证基础可读性再叠加视觉效果对加载提示来说文字看不看得清永远比动效炫不炫重要。5.5 页面长时间挂着加载动画CPU 和耗电飙升现象开发时看不出问题上到低端安卓机后页面发烫浏览器 debug 面板显示 GPU 进程占用高。原因无限循环加多个字符同时做动画每个字符都会单独触发一次渲染。动画中如果还带很大的text-shadow模糊区域模糊计算的代价不低尤其在低端设备上会被放大。解决第一动画结束后把display设为none第二同一时刻并发动画元素控制在 10 到 20 个以内分页或者只保留当前可见部分第三把text-shadow换成不涉及模糊的简单光晕或者减少光晕半径。真的需要大面积模糊效果时用一张透明 PNG 光晕图做背景渲染成本反而更低。另外给系统偏好设置做响应是一个加分项media (prefers-reduced-motion: reduce) { .loader *, .loader-char { animation: none !important; } }尊重用户的“减弱动态效果”系统设置是资深工程师的标准习惯也会直接过滤掉一批潜在的兼容性反馈。6. 进阶用法CSS 变量加状态机把 Loading 动效变成可复用组件再往下走我不会满足于“能跑就行”而是想把这份源码包里的动效变成一个真正好维护的组件。两个关键手法用 CSS 变量统管节奏用 JS 状态机统管生命周期。CSS 变量的作用不只是换颜色更重要的是让延迟和动画时长联动。在字符动画里可以这样定义一个带计算延迟的规则.loader-char { animation-delay: calc(var(--loader-char-index, 0) * var(--loader-delay-step, 0.14s)); }使用方不需要知道每个字符的序号只需要在模板渲染时给第i个字符写上style--loader-char-index: i延迟自动跟着字符位置走。这样整体节奏调起来只需要改一个--loader-delay-step不需要翻页改十几个nth-child。把变量定义在.loader容器上组件内所有子元素都能继承。JS 状态机的思路是把 loader 的所有状态收拢到一个对象里idle、loading、done、error。请求开始时进入loading拿到响应进入done失败时进入error并替换文案。隐藏时不能只改 display 就结束而是一套完整的序列先停止动画循环再置灰容器最后挂上aria-hidden。class LoaderController { constructor(root) { this.root root; this.status idle; } setStatus(status, message) { this.status status; if (message) this.root.textContent message; if (status loading) { this.root.style.display flex; this.root.classList.add(is-active); } else { this.root.classList.remove(is-active); setTimeout(() { this.root.style.display none; this.root.setAttribute(aria-hidden, true); }, 300); } } }使用方式简单到不会干扰业务代码controller.setStatus(loading, 请求中)请求结束后controller.setStatus(done)。这里值得留意的一点是textContent会清掉所有子元素所以如果你还想保留那三个点号就把点号也改造成可以直接用appendChild生成的 DOM 节点或者不在替换文案时动点号容器。从那以后我每次做加载动效都会强制走一遍这样流程先确认animation-fill-mode再测试background-clip的兼容最后把 display 状态的切换放在动画收尾之后。这三个顺序就是这套源码里的隐藏精华大部分线上问题都出在这几步上。说到调试也建议你用 DevTools 的 rendering 面板把 “Paint flashing” 打开看动画过程中哪些区域在持续重绘——只要绿色闪动面积大就说明动画写得不干净值得回头按第 5 章的思路优化一遍。希望帮到你。本文还有配套的精品资源点击获取

纯CSS3 Loading文字动效实战：从@keyframes到可复用组件

相关推荐

UG NX几何属性工具：用数据精准判断面的类型

PROFINET网络调试与诊断工具：快速定位现场掉站故障

AI2Paho扩展：App Inventor实现MQTT通信与485设备控制指南

更多资讯

双目立体视觉实验全流程：从标定、SGBM视差到深度图与点云

反激与正激开关电源深度解析：从变压器本质到选型实战

HS0038红外接收头引脚与电路搭建实战：从原理到应用

小区物业管理系统完整实现：Spring Boot+Vue前后端分离与数据库设计

LLC谐振变换器ZVS/ZCS实现与开关管选型死区时间设置实战

深入浅出DPDK读书笔记：大页配置与收包路径实战

今日更新

Multisim仿真NE555 PWM控制器：从搭电路到调占空比全流程

S32K312 AUTOSAR BSW开发实战：从配置踩坑到烧录交付

双目视觉三维人脸重建：从视差图到点云粗配准全流程解析

本周精选

CMOS设计三大物理效应：体效应、沟道长度调制与亚阈值导电

微信小程序在线阅读毕设全解析：Java后端+MySQL+避坑实战

Android音频问题五层分析法：从App到Codec的系统化诊断

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？