第 0 步：项目结构
- lighting-text/
- ├─ index.html
- └─ style.css
- index.html：包含列表 <ul>，其中每个 <li> 放一个字母或符号。
- style.css：设置配景、文字样式，以及关键帧动画（lighting）让文字逐个闪光。
第 1 步：编写 HTML 结构
在 index.html 中，焦点就是一个无序列表 <ul>，每个 <li> 对应一个字母/符号：
- <!DOCTYPE html>
- <html lang="pt-BR">
- <head>
- <meta charset="UTF-8">
- <meta name="author" content="Milena Carecho">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>CSS Animation</title>
- <!-- 引入我们自己的 CSS -->
- <link rel="stylesheet" type="text/css" href="style.css">
- <!-- 引入字体（可选） -->
- <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
- </head>
- <body>
- <ul>
- <li>D</li>
- <li>E</li>
- <li>S</li>
- <li>A</li>
- <li>F</li>
- <li>I</li>
- <li>O</li>
- <li>♡</li>
- <li>C</li>
- <li>S</li>
- <li>S</li>
- </ul>
- </body>
- </html>
- 每个 <li> 都是一个字母/符号组成的序列，比如 “D E S A F I O ♡ C S S”。
- <link> 标签引用了 Google Fonts 的 Lato 字体（可选）。
- 其余信息如 charset, viewport 等是常规页面设定。
第 2 步：全局样式与列表布局
在 style.css 里，先写一些根本样式让页面内容居中，并设定配景致：
- body {
- height: 100vh; /* 占满视窗高度 */
- display: flex; /* 启用 Flex 布局 */
- justify-content: center; /* 水平居中 */
- align-items: center; /* 垂直居中 */
- font-family: 'Lato', sans-serif; /* 指定字体 */
- background-color: #272727; /* 深色背景 */
- }
- /* <ul> 去掉默认的列表样式，使用 flex 排列字母 */
- ul {
- margin: 0;
- padding: 0;
- display: flex;
- }
- height: 100vh：让 body 占满整个浏览器高度。
- display: flex; align-items: center; justify-content: center;：让 <ul>（以及文字）在页面居中。
- background-color: #272727;：设置深灰色配景，使闪光结果更明显。
- ul { display: flex; }：让列表项横向排列。
第 3 步：文字的根本外观
再来看看 <li> 的初始样式与动画：
- ul li {
- list-style: none; /* 去掉列表项符号 */
- color: #484848; /* 默认字体颜色（深灰） */
- font-size: 88px; /* 加大字号 */
- letter-spacing: 15px; /* 增加字母间距，让效果更突出 */
- animation: lighting 1.4s linear infinite;
- /* 使用名为 lighting 的动画，时长1.4秒，线性播放并无限循环 */
- }
- color: #484848;：文字默认是深灰色，没有任何发光。
- font-size: 88px; letter-spacing: 15px;：让文字足够大并彼此间留有空隙，便于表现闪光。
- animation: lighting 1.4s linear infinite;：
- 调用名为 lighting 的关键帧，
- 连续时间：1.4秒，
- linear：匀速过渡，
- infinite：重复播放。
我们还没定义 @keyframes lighting，接下来就要完成它。
第 4 步：定义关键帧 lighting
这是本示例最焦点的动画部分：
- @keyframes lighting {
- 0% {
- color: #484848;
- text-shadow: none;
- }
- 90% {
- color: #484848;
- text-shadow: none;
- }
- 100% {
- color: #fff900; /* 亮黄色 */
- text-shadow: 0 0 7px #fff900, 0 0 50px #ff6c00;
- }
- }
- 0% 到 90%
- 文字颜色保持 #484848，即深灰色；
- text-shadow: none;，无阴影。
- 这意味着动画的前 90% 时间，文字不会闪光。
- 100%
- 文字切换成亮黄色 #fff900；
- text-shadow: 0 0 7px #fff900, 0 0 50px #ff6c00;，添加多重阴影：
- 一个较短的发光 0 0 7px #fff900；
- 一个更大、更远的发光 0 0 50px #ff6c00。
- 团体看起来像是突然闪亮了一下。
- 因为整个动画是 1.4s 线性循环，当到达 100% 时，瞬间回到初始状态 (0%) 再次开始，如此无限重复。
- 结果：每个字母在 1.4 秒的周期里，有 0.14 秒（10%）的时间会闪光。
第 5 步：让每个字母“依次”闪光
仅仅写上述动画，每个 <li> 会同时闪光。但示例中，每个字母的闪光是依次出现、相互错开的，这是通过 animation-delay 来控制。请看以下代码：
- ul li:nth-child(1) { animation-delay: 0s; }
- ul li:nth-child(2) { animation-delay: 0.1s; }
- ul li:nth-child(3) { animation-delay: 0.2s; }
- ul li:nth-child(4) { animation-delay: 0.3s; }
- ul li:nth-child(5) { animation-delay: 0.4s; }
- ul li:nth-child(6) { animation-delay: 0.5s; }
- ul li:nth-child(7) { animation-delay: 0.6s; }
- ul li:nth-child(8) { animation-delay: 0.7s; }
- ul li:nth-child(9) { animation-delay: 0.8s; }
- ul li:nth-child(10){ animation-delay: 0.9s; }
- ul li:nth-child(11){ animation-delay: 1s; }
- 第一个字母（D）从 0s 开始动画，第二个字母（E）从 0.1s 后开始动画，第三个字母（S）从 0.2s 开始……
- 所以每个字母的闪光时间错开了 0.1s，形成一种流动的闪光结果，而不是整排文字一起闪。
- 当动画周期结束时（1.4秒），它们又会再次从各自延迟开始新一轮闪动，于是循环不断。
你可以根据需求修改延迟，比如 0.08s、0.15s 等，或者在 .li:nth-child(N) 里改成想要的数值来调解节奏。
6. 运行结果与可选调解
现在，打开 index.html 预览，你会看到：
- 深灰色配景中，一排大号文字“D E S A F I O ♡ C S S”。
- 每个字母默认处于暗灰色，当到达各自的动画末了（100%）时，会瞬间切换为亮黄色并带有橙色的猛烈光晕。
- 整个序列依次闪光，一波接一波，显得酷炫又有节奏感。
可选改动：
- 闪光时长：把 lighting 1.4s linear infinite; 里的 1.4s 改成更大或更小，如 2s（闪光慢一点）或 1s（更快）。
- 发光颜色：
- color: #fff900; 可以改成别的亮色，比如 #00ff00 或 #ffffff；
- text-shadow: 0 0 7px #fff900, 0 0 50px #ff6c00; 也可以改成你喜欢的组合。比如把 #ff6c00 换成 #00ffff，就会有蓝绿色的外光。
- 默认颜色：#484848 可改成玄色或更浅灰，看个人审美。
- 字母个数与延迟：可以增加或淘汰 <li>，并对应增加 nth-child(N) 规则；动画延迟也可微调。
- 闪光占比：在 @keyframes lighting 中，0% 和 90% 同样保持暗色，而 100% 才亮起——意味着只有最后的 10% 时间在闪光。你可以把 90% 改成 80%、70% 等，让闪光时段更长。
总结
通过这一步步的解析，你已经把握了：
- Flex 布局：将文字排成一行并居中表现；
- 关键帧动画 + 延时：让每个字母按照差别的节奏进行闪亮；
- text-shadow 多重阴影：实现多层次的发光结果；
- nth-child：精准控制每个 <li> 的动画延迟，让文字依次闪动。
不需要任何 JavaScript，就能制作出一个漂移有序、富有节奏感的文字闪光动画。盼望本教程能让你理解 CSS 动画的乐趣与强大，并在实际项目中加以机动运用。祝你学习与创作舒畅！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
