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

【开源宝藏】30天学会CSS - DAY6 第六课 流光文字动画

article 2026/2/21 22:02:28

在这里插入图片描述

第 0 步：项目结构

lighting-text/├─ index.html└─ style.css
  1. index.html：包含列表 <ul>，其中每个 <li> 放一个字母或符号。
  2. 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;
}

解释

  1. height: 100vh：让 body 占满整个浏览器高度。
  2. display: flex; align-items: center; justify-content: center;：让 <ul>（以及文字）在页面居中。
  3. background-color: #272727;：设置深灰色背景，使闪光效果更明显。
  4. 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秒，线性播放并无限循环 */
}

解释

  1. color: #484848;：文字默认是深灰色，没有任何发光。
  2. font-size: 88px; letter-spacing: 15px;：让文字足够大并彼此间留有空隙，便于显示闪光。
  3. 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;}
}
动画阶段分析
  1. 0% 到 90%
    • 文字颜色保持 #484848，即深灰色；
    • text-shadow: none;，无阴影。
    • 这意味着动画的前 90% 时间，文字不会闪光。
  2. 100%
    • 文字切换成亮黄色 #fff900；
    • text-shadow: 0 0 7px #fff900, 0 0 50px #ff6c00;，添加多重阴影：
      • 一个较短的发光 0 0 7px #fff900；
      • 一个更大、更远的发光 0 0 50px #ff6c00。
    • 整体看起来像是突然闪亮了一下。
  3. 因为整个动画是 1.4s 线性循环，当到达 100% 时，瞬间回到初始状态 (0%) 再次开始，如此无限重复。
  4. 结果：每个字母在 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 预览，你会看到：

  1. 深灰色背景中，一排大号文字“D E S A F I O ♡ C S S”。
  2. 每个字母默认处于暗灰色，当到达各自的动画末端（100%）时，会瞬间切换为亮黄色并带有橙色的强烈光晕。
  3. 整个序列依次闪光，一波接一波，显得酷炫又有节奏感。

可选改动：

  • 闪光时长：把 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% 等，让闪光时段更长。

总结

通过这一步步的解析，你已经掌握了：

  1. Flex 布局：将文字排成一行并居中显示；
  2. 关键帧动画 + 延时：让每个字母按照不同的节奏进行闪亮；
  3. text-shadow 多重阴影：实现多层次的发光效果；
  4. nth-child：精准控制每个 <li> 的动画延迟，让文字依次闪动。

不需要任何 JavaScript，就能制作出一个漂移有序、富有节奏感的文字闪光动画。希望本教程能让你理解 CSS 动画的乐趣与强大，并在实际项目中加以灵活运用。祝你学习与创作愉快！

相关文章：

【开源宝藏】30天学会CSS - DAY6 第六课 流光文字动画

第 0 步&#xff1a;项目结构 lighting-text/├─ index.html└─ style.cssindex.html&#xff1a;包含列表 <ul>&#xff0c;其中每个 <li> 放一个字母或符号。style.css&#xff1a;设置背景、文字样式&#xff0c;以及关键帧动画&#xff08;lighting&#xf…...

编程日记 2026/2/13 23:38:07

linux - centos7 部署 redis6.0.5

事先说明 本篇文章只解决在部署redis中出现的问题&#xff0c;并没有部署redis的全过程&#xff0c;详细部署过程可以参考Linux安装部署Redis(超级详细) - 长沙大鹏 - 博客园 执行 make 命令时报错 原因&#xff1a;是因为gcc版本太低 升级gcc版本时 出现没有可用软件包 devt…...

编程日记 2026/2/19 7:47:58

Java反射机制详解：原理、应用与最佳实践

Java反射机制详解&#xff1a;原理、应用与最佳实践 1. 什么是反射&#xff1f; Java反射&#xff08;Reflection&#xff09;是指在运行时动态获取类的信息&#xff08;如类名、方法、字段、构造方法等&#xff09;并操作对象的能力。它允许程序在运行时检查和修改类的行为&…...

编程日记 2026/2/14 16:04:38

Swift实现嵌套json字典重排序并输出string

在网络请求或接口签名中&#xff0c;通常要求将参数按照一定规则拼接成字符串。一个常见的做法是对字典的 key 进行排序&#xff0c;然后按照 “keyvalue” 的格式拼接&#xff0c;多个参数之间以特定符号&#xff08;例如 &&#xff09;连接。 如果参数中包含嵌套的字典或…...

编程日记 2026/2/14 14:12:27

【Ai】--- 可视化 DeepSeek-r1 接入 Open WebUI（超详细）

在编程的艺术世界里，代码和灵感需要寻找到最佳的交融点，才能打造出令人为之惊叹的作品。而在这座秋知叶i博客的殿堂里，我们将共同追寻这种完美结合，为未来的世界留下属于我们的独特印记。【Ai】--- 可视化 DeepSeek-r1 接入 Open WebUI（超详细） 开发环境一、前情提要：你…...

编程日记 2026/2/14 16:58:35

VSCode加Cline插件加DeepSeek实现AI编程指南

VSCode加Cline插件加DeepSeek实现AI编程指南 简介 本文将详细介绍如何在VSCode中使用Cline插件结合DeepSeek AI实现高效的AI辅助编程&#xff0c;特别适合初学者快速上手。我们将通过实现一个TodoList应用的例子来演示整个流程。 环境准备 1. 安装VSCode 前往VSCode官网下…...

编程日记 2026/2/14 14:46:32

代码规范之Variable Names变量名

代码规范之Variable Names变量名 golang中 官方文档&#xff1a;https://go.dev/wiki/CodeReviewComments#variable-names Variable names in Go should be short rather than long. This is especially true for local variables with limited scope. Prefer c to lineCoun…...

编程日记 2026/2/16 21:39:01

2025春招市场迎AI热潮：生成式人工智能（GAI）认证如何重构人才竞争力

随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;已逐渐渗透到我们生活的方方面面&#xff0c;从智能家居到自动驾驶&#xff0c;从智能客服到医疗诊断&#xff0c;AI的身影无处不在。而在这股AI浪潮中&#xff0c;生成式人工智能&#xff08;Generative AI,…...

编程日记 2025/11/24 4:26:48

Flink基础简介和安装部署

文章目录 一、Flink基础简介1、什么是Flink2、Flink流处理特性3、Flink四大基石4、Flink中的角色 二、Flink集群搭建1、Local模式①上传Flink安装包②启动交互窗口③提交任务测试④访问WebUI页面查看⑤退出停止集群 2、Standalone模式①修改配置⽂件 conf/flink-conf.yaml②修改…...

编程日记 2026/2/14 13:21:36

SpringBoot分布式项目实战：观察者模式的高阶应用与避坑指南

一、痛点场景&#xff1a;当观察者遇上分布式 在某电商平台重构项目中&#xff0c;我们遭遇了这样的困境&#xff1a;订单中心完成支付后需要触发库存扣减、积分结算、物流调度等12个后续操作。最初的实现采用了硬编码调用&#xff1a; // 伪代码示例 public void paySuccess…...

编程日记 2026/1/23 2:13:00

How to use pgbench to test performance for PostgreSQL?

pgbench 是一个用于测试 PostgreSQL 数据库性能的基准测试工具。通过模拟多个客户端并发执行 SQL 查询&#xff0c;它可以帮助你评估数据库的性能。以下是使用 pgbench 的基本步骤&#xff1a; 安装 pgbench pgbench 是 PostgreSQL 的一部分&#xff0c;因此在安装 PostgreSQ…...

编程日记 2025/12/24 11:48:11

C#基础学习（五）函数中的ref和out

1. 引言&#xff1a;为什么需要ref和out&#xff1f; ​问题背景&#xff1a;函数参数默认按值传递&#xff0c;值类型在函数内修改不影响外部变量&#xff1b;引用类型重新赋值时外部对象不变。​核心作用&#xff1a;允许函数内部修改外部变量的值&#xff0c;实现“双向传参…...

编程日记 2026/2/12 1:46:19

从零构建大语言模型全栈开发指南：第二部分：模型架构设计与实现-2.2.2文本生成逻辑：Top-k采样与温度控制

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路 文章大纲 2.2.2 文本生成逻辑：Top-k采样与温度控制1. 文本生成的核心挑战与数学框架1.1 自回归生成的基本流程2. `Top-k`采样原理与工程实现2.1 数学定义与算法流程2.2 PyTorch实现优化3. 温度控制的数学本质与参…...

编程日记 2026/2/14 4:55:43

关于CodeJava的学习笔记——9

一、IO流 1、定义 IInput输入 OOutput输出 流 : 数据从源点传输到汇点的"管道"而已 2、流的分类 按照方向分: 输入流 输出流 *:参照物当前Java程序为参照物 按照单位分: 字节流 字符流 按照功能分: 节点流 过滤流(包装流 处…...

编程日记 2026/2/15 21:48:38

LeetCode算法题(Go语言实现)_11

题目 给定字符串 s 和 t &#xff0c;判断 s 是否为 t 的子序列。 字符串的一个子序列是原始字符串删除一些&#xff08;也可以不删除&#xff09;字符而不改变剩余字符相对位置形成的新字符串。&#xff08;例如&#xff0c;"ace"是"abcde"的一个子序列&a…...

编程日记 2026/2/13 22:17:22

Python----数据分析（足球运动员数据分析）

一、数据展示 1.1、数据 1.2、列名 字段名备注Name姓名Nationality国籍National_Position国家队位置National_Kit国家队号码Club所在俱乐部Club_Position所在俱乐部位置Club_Kit俱乐部号码Club_Joining加入俱乐部时间Contract_Expiry合同到期时间Rating评分Height身高Weight体…...

编程日记 2026/2/13 21:30:52

Day38 | 1365. 有多少小于当前数字的数字、941. 有效的山脉数组、1207. 独一无二的出现次数、283. 移动零、189. 轮转数组

1365. 有多少小于当前数字的数字 题目链接&#xff1a;1365. 有多少小、于当前数字的数字 - 力扣&#xff08;LeetCode&#xff09; 题目难度&#xff1a;简单 代码&#xff1a; class Solution {public int[] smallerNumbersThanCurrent(int[] nums) {Map<Integer,Inte…...

编程日记 2025/4/12 8:25:19

Docker-清理容器空间prune

docker system prune -a 是一个非常有用的命令&#xff0c;用于清理 Docker 系统中未使用的资源&#xff0c;包括停止的容器、未使用的网络、卷以及未被任何容器引用的镜像&#xff08;悬空镜像和所有未使用的镜像&#xff09;。以下是关于该命令的详细说明&#xff1a; 命令格…...

编程日记 2025/4/6 7:31:21

matplotlib——南丁格尔玫瑰

南丁格尔玫瑰图&#xff08;Nightingale Rose Chart&#xff09;&#xff0c;是一种特殊形式的柱状图&#xff0c;它以南丁格尔&#xff08;Florence Nightingale&#xff09;命名&#xff0c;她在1858年首次使用这种图表来展示战争期间士兵死亡原因的数据。 它将数据绘制在极坐…...

编程日记 2026/2/14 19:27:20

Django与网页表单

我叫补三补四&#xff0c;很高兴见到大家&#xff0c;欢迎一起学习交流和进步 今天来讲一讲网页表单 网页表单又叫做HTML表单&#xff0c;用来处理用户从页面输入发送到服务器的数据&#xff0c;页面表单通常会提供复选框、单选按钮和文本字段&#xff0c;方便用户填写各种形式…...

编程日记 2026/2/18 23:22:35

Rust从入门到精通之入门篇：10.包和模块

包和模块 在本章中&#xff0c;我们将学习 Rust 的包和模块系统&#xff0c;它们是组织和重用代码的重要工具。随着项目规模的增长&#xff0c;良好的代码组织变得越来越重要&#xff0c;Rust 提供了一套强大的机制来管理代码结构。 包和 Crate Crate Crate 是 Rust 中最高…...

编程日记 2026/2/18 22:43:22

ChatDBA VS DeepSeek：快速诊断 OceanBase 集群新租户数据同步异常

社区王牌专栏《一问一实验&#xff1a;AI 版》改版以来已发布多期&#xff08;51-60&#xff09;&#xff0c;展现了 ChatDBA 在多种场景下解决问题的效果。 下面让我们正式进入《一问一实验&#xff1a;AI 版》第 62 期&#xff0c;看看 ChatDBA 最新效果以及与热门大模型 De…...

编程日记 2026/2/13 8:32:55

dify忘记密码

特别好&#xff0c;非常好&#xff0c;一把年纪忘了dify的账号、密码了&#xff0c;very good&#xff01;&#xff01;&#xff01; 参考如下教程 https://zhuanlan.zhihu.com/p/24515387167 rootbae577d82ec7:/# psql -U postgres psql: error: connection to server on so…...

编程日记 2026/2/10 14:19:40

Python----计算机视觉处理（Opencv：图像边缘检测：非极大值抑制，双阈值筛选)

一、 高斯滤波 边缘检测本身属于锐化操作&#xff0c;对噪点比较敏感&#xff0c;所以需要进行平滑处理。这里使用的是一个5*5的高斯 核对图像进行消除噪声。 二、计算图像的梯度和方向 三、非极大值抑制 在得到每个边缘的方向之后&#xff0c;其实把它们连起来边缘检测就算完了…...

编程日记 2026/2/21 21:07:29

vue3(笔记)5.0--pinia工具的知识扩展

pinia工具 defineStore(创建pinia) 作用&#xff1a;用于定义一个 Pinia store。 用法&#xff1a; 接收一个唯一的 ID 和一个配置对象&#xff0c;配置对象中可以定义 state、getters 和 actions。state 是一个函数&#xff0c;返回初始状态。getters 类似于 Vue 组件中的计…...

编程日记 2026/2/14 3:19:48

基于Kubernetes部署Prometheus监控平台

#作者&#xff1a;stackofumbrella 文章目录 prometheus和k8s集群版本对照表架构Prometheus Operator简介kube-prometheus下载地址 安装修改镜像地址修改Prometheus的service修改Grafana的service修改Alertmanager的service数据持久化执行安装 Prometheus验证Grafana验证解决C…...

编程日记 2026/2/15 1:10:52

往期项目shader着色器实践效果应用合集

1、管路混色 2、水管水流效果 3、水管流入到流完效果 4、加热冷却 两 色混色 示意 XX、毒蘑菇测试效果...

编程日记 2026/2/21 8:25:23

如何在 React 项目中使用React.lazy和Suspense实现组件的懒加载？

大白话如何在 React 项目中使用React.lazy和Suspense实现组件的懒加载&#xff1f; 在 React 项目里&#xff0c;有时候组件功能多、体积大&#xff0c;要是一次性把所有组件都加载进来&#xff0c;网页加载速度就会变慢。而 React 提供了 React.lazy 和 Suspense 这两个好东西…...

编程日记 2026/2/16 12:07:51

绿色暴政：Relax Max如何用军工科技定义环保新标准

《绿色暴政&#xff1a;Relax Max如何用军工科技定义环保新标准》 ——从隐形战斗机涂层到零碳卫浴的降维打击 &#xff08;洛克希德马丁实验室&#xff0c;2023年&#xff09;当F-35战斗机的隐形涂料配方被改写为卫浴釉料时&#xff0c;环保产业迎来了最硬核的颠覆者。Relax…...

编程日记 2026/2/17 19:56:59

蓝桥杯刷题 Day 4 栈与链表

蓝桥杯刷题 Day 4 栈与链表 文章目录 蓝桥杯刷题 Day 4 栈与链表前言一、栈1. 解题思路2. 拆解代码&#xff08;不复杂&#xff0c;不拆了&#xff09; 二、链表1. 解题思路1.1 主函数1.2 自定义列表类1.2.1 插入操作1.2.2 删除操作1.2.3 按要求输出 三、 题后收获3.1 知识点 前…...

编程日记 2026/2/13 18:08:02