【开源宝藏】30天学会CSS - DAY6 第六课 流光文字动画
第 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 动画的乐趣与强大,并在实际项目中加以灵活运用。祝你学习与创作愉快!
相关文章:
【开源宝藏】30天学会CSS - DAY6 第六课 流光文字动画
第 0 步:项目结构 lighting-text/├─ index.html└─ style.cssindex.html:包含列表 <ul>,其中每个 <li> 放一个字母或符号。style.css:设置背景、文字样式,以及关键帧动画(lighting…...
C#与西门子PLC的六大通信库
C#与西门子PLC的六大通信库: 一、S7.NET S7.NET是一款开源的S7协议通信库,支持西门子S7通信。 二、Sharp7 Sharp7与S7.NET一样,是一款.NET版本的S7通信库。 三、Snap7 Snap7是一个开源的C通信库,支持西门子S7通信。 四、Prodave P…...
VScode
由于centos停止了维护 ,后面使用ubuntu 在Ubuntu中用vscode 充当记事本的作用 替代了centos中vim的作用 后面使用vscode编辑 vscode中继续使用makefile , xshell中的cgdb进行debug (半图形写 ,半命令行debug&&运行) 官网下载地址:https://code.visuals…...
Linux文件系统与磁盘管理
文件系统和磁盘管理是Linux系统管理的核心组成部分,直接影响系统的性能、数据安全性和存储效率。本文将从Linux文件系统的基本概念出发,深入探讨其架构、类型、管理工具以及实际操作技巧,帮助读者全面理解并掌握这一关键领域。 第一章&#x…...
【云馨AI-大模型】大模型的开发和应用中,Python、PyTorch和vLLM关系概括
说明 1. Python 定位:基础编程语言。作用:Python 是大模型生态系统的核心语言,几乎所有深度学习框架(如 PyTorch、TensorFlow)和工具链(如 vLLM)都通过 Python 接口提供服务。特点:…...
AWS SAP学习笔记-概念
1、什么是ETL应用程序,举个例子说明? ETL(Extract, Transform, Load)应用程序是一种用于数据处理和迁移的工具或程序,它主要负责从多个数据源提取数据,对数据进行转换和清洗,然后将处理后的数据…...
kotlin知识体系(三) : Android Kotlin 中的函数式编程实践指南
前言 Kotlin以函数式编程革新了Android开发,通过高阶函数、扩展函数等特性,帮助开发者构建高可维护性代码。接下来我们来看一下Kotlin 中的函数式编程的各个特性。 1. 高阶函数与 Lambda 表达式:函数作为参数或返回值 在 Kotlin 中&#x…...
SpringBoot3+Vue3实战(Vue3快速开发登录注册页面并对接后端接口、表单项自定义校验规则、Hutool工具类)(4)
目录 一、SpringBoot3Vue3实现基本增删改查。前后端通信交互、配置后端跨域请求。数据批量删除。(博客链接) 二、SpringBoot3Vue3快速开发登录、注册页面并实现对接。 (1)操作数据表employee(员工信息表)。 <1>修改employee表的字段组成。 <2&g…...
OpenCV图像拼接项目指南
引言 图像拼接是计算机视觉领域中的一个重要应用,它可以将多张有重叠区域的图像拼接成一张全景图。这项技术广泛应用于虚拟现实、医学影像、卫星图像处理等领域。OpenCV作为一个强大的开源计算机视觉库,提供了丰富的工具和函数来实现图像拼接。本文将详…...
机器学习--DBSCAN聚类算法详解
目录 引言 1. 什么是DBSCAN聚类? 2. DBSCAN聚类算法的原理 3. DBSCAN算法的核心概念 3.1 邻域(Neighborhood) 3.2 核心点(Core Point) 3.3 直接密度可达(Directly Density-Reachable) 3…...
使用 Docker 构建 LangChain 开发环镜及 ChatOllama 示例
文章目录 Github官网简介Dockerfilerequirements.txt构建 LangChain 镜像ChatOllama 示例Ollama 示例模拟 tools Github https://github.com/langchain-ai/langchain 官网 https://python.langchain.com/docs/introduction/ 简介 LangChain 是一个用于构建 LLM 驱动的应用…...
持续集成与持续交付:这里有从开发到部署的全流程优化
阅读原文 在上一篇中,我们深入探讨了安全测试的核心内容,强调了它在发现安全漏洞和提升系统安全性中的重要作用。接下来,我们将聚焦于持续集成(CI)与持续交付(CD),这是现代软件开发…...
CH32V208蓝牙内部带运放32位RISC-V工业级微控制器CH32V208CBU6、CH32V208GBU6开发板原理图和PCB
开发板 CH32V208CBU6立创格式的开发板上述链接可下载,官方文件进行了转换,使用前请仔细核对。 CH32V208CBU6原理图,上述图片为芯片部分。已进行DRC。 CH32V208CBU6 PCB三维图,上述图片为芯片部分。已进行DRC。 CH32V208GBU6开发…...
机器臂运动控制算法工程师面试
大厂的经验总结: 一、基础概念理解 请解释机器臂运动学正解和逆解的概念,并分别说明其用途。 正解:已知机器臂各关节的角度(或位移),通过运动学模型计算出机器臂末端执行器在笛卡尔空间中的位置和姿态。用途在于可以根据给定的关节驱动值,预测末端的实际位置,用于运动…...
【一起来学kubernetes】21、Secret使用详解
Secret 的详细介绍 Secret 是 Kubernetes 中用于存储和管理敏感信息(如密码、令牌、密钥等)的资源对象。Secret的设计目的是为了安全地存储和传输敏感信息,如密码、API密钥、证书等。这些信息通常不应该直接硬编码在配置文件或镜像中&#x…...
Java架构师成长之路
概述 本教程主要从6个方面,全面讲解Java技术栈的知识。 1.性能调优 深入理解MySQL底层原理、索引逻辑,数据结构与算法。使用Explain进行优化分析MVCC原理剖析日志机制解析 2.框架源码 掌握Spring底层原理带你手写一个Spring解析IOC、AOP源码、以及事…...
Cyberchef实用功能之-json line格式文件美化和查询
本文将介绍一下如何使用cyberchef对json line格式数据进行美化方便阅读,以及json line格式数据的批量查询操作。 之前的文章介绍了json格式数据的美化和查询,即Cyberchef实用功能之-json解析美化和转换,Cyberchef实用功能之-批量提取json数据…...
span与span之间的空白如何解决?
<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><title>标题</title> <style>div{background: yellow;}span:first-of-type{background: red;}span:last-of-type{background: blue;}</styl…...
2024年MathorCup数学建模B题甲骨文智能识别中原始拓片单字自动分割与识别研究解题全过程文档加程序
2024年第十四届MathorCup高校数学建模挑战赛 B题 甲骨文智能识别中原始拓片单字自动分割与识别研究 原题再现: 甲骨文是我国目前已知的最早成熟的文字系统,它是一种刻在龟甲或兽骨上的古老文字。甲骨文具有极其重要的研究价值,不仅对中国文…...
3.23学习总结
字符串 String java.lang,String 类代表字符串,Java程序中所有的字符串文字都为此类的对象 字符串的内容是不会发生改变的,它的对象在创建之后不能呗更改 字符串的内存模型 当使用双引号直接赋值时,系统会检查该字符串在串池中是否存在。 …...
RT-Thread CI编译产物artifacts自动上传功能介绍
近期在RT-Thread开源项目中,我们引入了一项实用的功能改进——将每次CI(持续集成)编译生成的产物(artifacts)自动上传到GitHub,方便开发者和用户能够更便捷地获取和测试最新的编译结果。 参考链接…...
Android adb调试应用程序
启动app 有的时候app不是预先安装的,也不能从界面start一个app,这时需要后台拉起app。 $adb shell am start package.name/Activity.name 例如,android原生camera app, 包名为com.android.camera2, mainActivity名为…...
仅靠prompt,Agent难以自救
Alexander的观点很明确:未来 AI 智能体的发展方向还得是模型本身,而不是工作流(Work Flow)。还拿目前很火的 Manus 作为案例:他认为像 Manus 这样基于「预先编排好的提示词与工具路径」构成的工作流智能体,…...
【嵌入式学习2】函数
目录 ## 函数 ## 函数分类 ## 函数定义 1、无参数无返回值 2、有参数无返回值 3、有参数有返回值 ## 函数声明 ## 局部变量和全局变量 ## 多文件编程 如何避免把同一个头文件 include 多次,或者头文件嵌套包含? 命令行编译文件 头文件包含的…...
平芯微PW5012应用电路
PW5012应用电路板介绍: 1.1 单节和两节锂电池升压 12V 或 9V, 1A 至 3A 电路板, 1.2 应用: 升压电压转换板 1.3 VIN 输入电压: 3V-9V 1.4 VOUT 输出电压: 9V 2A(VIN3.7V) ࿰…...
Langchain4J框架相关面试题
以下是关于Langchain4J框架的面试题目及答案 ### Langchain4J基础概念类 1. **Langchain4J框架是什么?它的核心功能有哪些?** Langchain4J是一个用于构建语言模型应用的Java框架,它为开发者提供了一套简洁高效的API,使得在Jav…...
【MySQL】用户管理
目录 一、用户1.1 用户信息1.2 创建用户1.3 删除用户1.4 修改用户密码1.4.1 用户修改自己密码1.4.2 root用户修改指定用户的密码 二、数据库的权限2.1 给用户授权2.2 回收用户权限 结尾 一、用户 1.1 用户信息 MySQL中的用户,都存储在系统数据库mysql的user表中。…...
5.高频加热的原理与常用集成电路介绍
一、高频加热的类型 利用高频电源加热通常由两种方法:电介质加热(被加热物体绝缘)与感应加热(被加热物体导电),详细解释如下: 电介质加热(利用高频电压的高频电场导致物体自身分子摩…...
Elasticsearch:可配置的推理 API 端点分块设置
作者:来自 Elastic Daniel Rubinstein Elasticsearch 开放推理 API 现已支持可配置的分块,以便在文档摄取时处理语义文本字段。 Elasticsearch 推理 API 允许用户利用各种提供商的机器学习模型执行推理操作。其中一个常见用例是在索引中支持用于语义搜索…...
从零构建大语言模型全栈开发指南:第二部分:模型架构设计与实现-2.1.2多头注意力扩展与掩码机制(因果掩码与填充掩码)
👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路 文章大纲 2.1.2 多头注意力扩展与掩码机制(`因果掩码与填充掩码`)1. 多头注意力机制:分治策略的数学实现1.1 多头注意力核心公式2. 逐行代码实现2.1 多头拆分与合并3. 掩码机制:注意力控制的核心技术3.1 因果…...
Scikit-learn模型评估全流程解析:从数据划分到交叉验证优化
模型评估的步骤、scikit-learn函数及实例说明 1. 数据划分(Train-Test Split) 函数:train_test_split使用场景:将数据分为训练集和测试集,避免模型过拟合。作用:确保模型在未见过的数据上验证性能。示例&…...
大模型量化框架GPTQModel的基本使用方法
接上一篇博客:AutoGPTQ报torch._C._LinAlgError: linalg.cholesky: The factorization could not be completed的解决办法-CSDN博客 如果Llama factory量化一直报错,可以改用其他的量化框架,例如GPTQ:https://github.com/ModelCl…...
HTTP长连接与短连接的前世今生
HTTP长连接与短连接的前世今生 大家好!作为一名在互联网摸爬滚打多年的开发者,今天想跟大家聊聊HTTP中的长连接和短连接这个话题。 记得我刚入行时,对这些概念一头雾水,希望这篇文章能帮助新入行的朋友少走些弯路。 什么是HTTP…...
线程控制学习
1、线程创建: int pthread_create(pthread_t *thread, const pthread_attr_t *attr, void * (*start_routine)(void*), void *arg); 参数 thread:返回线程ID;attr:设置线程的属性,attr为nullptr表示使用默认属性(一般…...
使用 Node.js 从零搭建 Kafka 生产消费系统
目录 一、Kafka 核心概念速览 二、环境准备 三、生产者实现:发送消息 四、消费者实现:处理消息 五、高级配置与最佳实践 六、常见问题解决 七、应用场景示例 总结 Apache Kafka 作为高吞吐、分布式的消息队列系统,在实时数据流处理中…...
【Linux系统】Linux权限讲解!!!超详细!!!
目录 Linux文件类型 区分方法 文件类型 Linux用户 用户创建与删除 用户之间的转换 su指令 普通用户->超级用户(root) 超级用户(root) ->普通用户 普通账户->普通账户 普通用户的权限提高 sudo指令 注: Linux权限 定义 权限操作 1、修改文…...
Ubuntu安装TensorFlow 2.13-GPU版全流程指南(anaconda)
目录 一、安装前准备1.版本选择依据2.创建独立环境 二、详细安装步骤1.通过conda自动安装依赖2.手动验证依赖版本 三、补充说明1.组件依赖关系表2.常见问题解决方案3.性能验证脚本 一、安装前准备 1.版本选择依据 当前最新稳定版:TensorFlow 2.13&a…...
Spring事务管理
介绍了事务的概念,事务的特性,JDBC 事务管理的步骤和操作过程,以及Spring事务管理的两种实现方式:编程式事务管理和声明式事务管理。 1.事务的概念 事务(Transaction)就是将一系列的数据库操作作为一个整体…...
避雷 :C语言中 scanf() 函数的错误❌使用!!!
1. 返回值说明 scanf函数会返回成功匹配并赋值的输入项个数,而不是返回输入的数据。 可以通过检查返回值数量来确认输入是否成功。若返回值与预期不符,就表明输入存在问题。 #include <stdio.h>int main() {int num;if (scanf("%d", …...
判断一个操作是不是允许
一、目的 简单探索一个URL请求是不是允许的。 二、具体过程 (一)系统的初始化 系统数据库有账户"admin",密码是"123"。 账号"admin"的角色是管理员"manager"。 假设管理员身份设定的权限是: 1、对于/user/开头的…...
【FPGA开发】Cordic原理推导、Xilinx PG105手册解读
目录 Cordic原理推导PG105手册解读IP核总览核心计算功能总览基本握手信号非阻塞模式 NonBlocking Mode阻塞模式 Block Mode 数据格式数据映射 本文针对Cordic算法本身,以及Xilinx官方CORDIC IP做学习记录,如有纰漏,欢迎指正! Cord…...
数据结构与算法:宽度优先遍历
前言 进入图论部分难度明显提升了一大截,思路想不到一点…… 一、宽度优先遍历 1.内容 宽度优先遍历主要用于在图上求最短路。 (1)特点 宽度优先遍历的特点就是逐层扩展,最短路即层数 (2)使用条件 …...
PyTorch 面试题及参考答案(精选100道)
目录 PyTorch 的动态计算图与 TensorFlow 的静态计算图有何区别?动态图的优势是什么? 解释张量(Tensor)与 NumPy 数组的异同,为何 PyTorch 选择张量作为核心数据结构? 什么是 torch.autograd 模块?它在反向传播中的作用是什么? 如何理解 PyTorch 中的 nn.Module 类?…...
【数理基础】【概率论与数理统计】概率论与数理统计本科课程总结、资料汇总、个人理解
1 前言 概率论与数理统计是数学系核心的基础专业课,我本科的时候,是拆开上的,对应工科专业的高数中的概率论与数理统计,在量子力学,机器学习,计算机领域深度学习,大模型,机器人控制…...
美制 / 英制单位换算/公制/帝国制 单位转换速查表
文章目录 💡Introduction📏 英制(美制)单位与公制换算速查表🧱 一、长度(Length)🧴 二、体积(Volume / Liquid Measure)⚖️ 三、质量 / 重量(Wei…...
ENSP学习day9
ACL访问控制列表实验 ACL(Access Control List,访问控制列表)是一种用于控制用户或系统对资源(如文件、文件夹、网络等)访问权限的机制。通过ACL,系统管理员可以定义哪些用户或系统可以访问特定资源&#x…...
我爱学算法之——滑动窗口攻克子数组和子串难题(中)
学习算法,继续加油!!! 一、将 x 减到 0 的最小操作数 题目解析 来看这一道题,题目给定一个数组nums和一个整数x;我们可以在数组nums的左边或者右边进行操作(x减去该位置的值)&#…...
Linux centos 7 vsftp本地部署脚本
下面是脚本: #!/bin/bash #function:vsftpd脚本 #author: 20230323 IT 小旋风# 判断是否是root用户 if [ "$USER" ! "root" ]; thenecho "不是root 装个蛋啊"exit 1 fi# 关闭防火墙 systemctl stop firewalld && systemctl disable …...
编程考古-安德斯·海尔斯伯格(Anders Hejlsberg)回答离开Borland的原因
安德斯海尔斯伯格(Anders Hejlsberg)是著名的编程语言和工具开发者,曾主导开发了 Turbo Pascal、Delphi(Borland 时期),以及加入微软后参与的 C# 和 TypeScript。关于他离开 Borland 的原因,可以…...
数据库数值函数详解
各类资料学习下载合集 https://pan.quark.cn/s/8c91ccb5a474 数值函数是数据库中用于处理数值数据的函数,可以用于执行各种数学运算、统计计算等。数值函数在数据分析及处理时非常重要,能够帮助我们进行数据的聚合、计算和转换。在本篇博客中,我们将详细介绍常用的…...