前端 CSS 经典：好看的标题动画
前言：好看的标题动画实现。
效果：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>body {height: 100vh;background: #000;display: flex;flex-direction: column;align-items: center;justify-content: center;}p:nth-child(1) {color: red;}p:nth-child(2) {color: yellow;}p:nth-child(3) {color: blue;}.title {display: flex;font-size: 42px;text-transform: uppercase;letter-spacing: 5px;transform: rotate(-10deg);}.title span {opacity: 0;text-shadow: 1px 1px #533d4a, 2px 2px #533d4a, 3px 3px #533d4a, 4px 4px#533d4a, 5px 5px #533d4a, 6px 6px #533d4a;transform: skew(-10deg);animation: move 1s var(--d) cubic-bezier(0.25, 0.1, 0.57, 1.31) forwards;}@keyframes move {from {opacity: 0;transform: skew(-10deg) translateY(300%);}to {opacity: 1;transform: skew(-10deg) translateY(0);}}</style></head><body><p class="title">这是一个标题哦</p><p class="title">这是一个标题哦</p><p class="title">这是一个标题哦</p></body><script>const ps = document.querySelectorAll(".title");ps.forEach((p) => {const result = p.textContent.split("").map((letter) => `<span>${letter}</span>`).join(``);p.innerHTML = result;});const spans = document.querySelectorAll(".title span");for (let i = 0; i < spans.length; i++) {spans[i].style.setProperty("--d", i * 0.2 + "s");}</script>
</html>
相关文章：
前端 CSS 经典：好看的标题动画
前言：好看的标题动画实现。 效果： <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><…...
Vue项目打包优化（element+echarts+vue使用cdn）
如何打包查看所有资源大小？ 使用插件：webpack-bundle-analyzer 效果图： 安装webpack-bundle-analyzer 第一步，终端执行 npm instatll webpack-bundle-analyzer --save-dev第二步，vue.config.js配置 module.export…...
【ARM 嵌入式 C 入门及渐进 6.1 -- ARMv8 C 内嵌汇编写系统寄存器的函数实现】
请阅读【嵌入式开发学习必备专栏】 文章目录 ARMv8 C 内嵌汇编写系统寄存器 ARMv8 C 内嵌汇编写系统寄存器 在ARMv8架构下，使用C语言结合内嵌汇编实现将一个值写入特定系统寄存器的函数可以按照下面的方法进行。 下面这个示例展示了如何将一个uint64_t类型的值写入…...
ESP32基础应用之使用手机浏览器作为客户端与ESP32作为服务器进行通信
文章目录 1 准备2 移植2.1 softAP工程移植到simple工程中2.2 移植注意事项 3 验证 1 准备 参考工程 Espressif\frameworks\esp-idf-v5.2.1\examples\wifi\getting_started\softAP softAP工程演示将ESP32作为AP，即热点，使手机等终端可以连接参考工程 Esp…...
【课后练习分享】Java用户注册界面设计和求三角形面积的图形界面程序
目录 java编程题（每日一练）： 问题一的答案代码如下： 问题一的运行截图如下： 问题二的答案代码如下： 问题二的运行截图如下： java编程题（每日一练）： 1.…...
三维空间坐标系变换（旋转平移）
在探究三维空间下的变换前，首先研究二位空间，因为比较直观，再推广到三维空间。 首先应该清楚的一点是：旋转、平移对于坐标系下的点以及坐标系本身而言都是相对的（运动的相对性）。 例如： X O Y …...
OC笔记之foundation框架
OC学习笔记（三） 文章目录 OC学习笔记（三）常用Foundation框架结构体NSRangeNSRange结构体的定义定义 NSRange 的方法打印Range的相关信息NSRange的实际运用查找子字符串返回NSRange结构体 NSPointNSRect NSStringNSString的创建NSS…...
Docker部署springboot包并联通MySQL
Docker部署jar 实现功能 部署springboot下发布的jar包不同docker容器之间通信（如MySQL访问、Redis访问）多个jar包部署 参考文献 Just a moment… Just a moment… https://www.jb51.net/article/279449.htm springboot配置 这里使用多yaml配置文件&…...
多帧激光点云基于标定参数进行融合拼接
1、前言 在三维视觉技术蓬勃发展的今天，点云作为捕获和表示三维环境的基础数据形式，扮演着至关重要的角色。点云融合拼接技术，作为连接孤立点云片段、构建连续、全面三维场景的核心过程，对于自动驾驶、机器人导航、三维建模以及地…...
python数据类型之字符串
目录 1.字符串概念和注意事项 2.字符串内置函数 3.字符串的索引、切片和遍历 4.字符串运算符 5.字符串常用方法 性质判断 开头结尾判断 是否存在某个子串 大小写等格式转化 子串替换 删除两端空白字符 格式化字符串 分割与合并 6.字符串模板 7.exec 函数 8.字符…...
Vue3实战笔记（38）—粒子特效终章
文章目录 前言一、怎样使用官方提供的特效二、海葵特效总结 前言 官方还有很多漂亮的特效，但是vue3只有一个demo，例如我前面实现的两个页面就耗费了一些时间，今天记录一下tsparticles官方内置的几个特效的使用方法，一般这几个就足…...
晶体振荡器
一、晶振与晶体区别 晶振是有源晶振的简称，又叫振荡器，英文名称是oscillator，内部有时钟电路，只需供电便可产生振荡信号；晶体是无源晶振的简称，也叫谐振器，英文名称是crystal，是无极…...
单词可交互的弧形文本
在一个项目中，要求把少儿读本做成电子教材呈现出来，电子书的排版要求跟纸质书一致。其中，英语书有个需求：书中有些不规则排版的文本（如下图所示），当随书音频播放时，被读到的文本要求…...
Linux——进程信号(一)
1.信号入门 1.1生活中的信号 什么是信号? 结合实际红绿灯、闹钟、游戏中的"！"等等这些都是信号。 以红绿灯为例子： 一看到红绿灯我们就知道：红灯停、绿灯行；我们不仅知道它是一个红绿灯而且知道当其出现不同的状况…...
centos9 stream在线安装NVIDIA驱动（rockylinux9.4也成功安装nvidia驱动）
Install NVIDIA Drivers on CentOS Stream 9（rockylinux9.4成功） 主板为技嘉mz72-hb2 显卡为4090 一.Disable Secure Boot From the BIOS 二.Enabling the EPEL Repository on CentOS Stream 9 1.update the DNF package repository cache sudo dnf …...
springmvc不同格式的参数解析
参数解析 application/x-www-form-urlencoded格式 这种格式就是传统的表单提交格式，就是一个个的键值对，会进行url编码，使用springmvc接收时使用RequestParam来进行接收，与传入的字段一一对应，此时使用的参数处理器是R…...
Unity3D让BoxCollider根据子物体生成自适应大小
系列文章目录 unity工具 文章目录 系列文章目录unity工具 👉前言👉一、编辑器添加👉二、代码动态添加的方法(第一种)👉三、代码动态添加的方法(第二种)👉四、重新设置模型的中心点👉壁纸分享👉…...
WSL 2 installation is incomplete.
使用的wsl2版本很旧，因此需要手动更新。 https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi...
Servlet的request对象
request对象的继承关系 1.HttpServletRequest接口继承了ServletRequest接口，对其父接口进行了扩展，可以处理满足所有http协议的请求 2.HttpServletRequest和ServletRequest都是接口，不能创建对象，因此在tomcat底层定义实现类并创…...
蓝桥杯-合并数列
小明发现有很多方案可以把一个很大的正整数拆成若干正整数的和。他采取了其中两种方案，分别将它们列为两个数组 {a1, a2, …, an} 和 {b1, b2, …, bm}。两个数组的和相同。 定义一次合并操作可以将某数组内相邻的两个数合并为一个新数，新数的值是原来两…...
龙虎榜——20250610
上证指数放量收阴线，个股多数下跌，盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型，指数短线有调整的需求，大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的：御银股份、雄帝科技 驱动…...
Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢，博主的学习进度也是步入了Java Mybatis 框架，目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学，希望能对大家有所帮助，也特别欢迎大家指点不足之处，小生很乐意接受正确的建议&…...
从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路
进入2025年以来，尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断，但全球市场热度依然高涨，入局者持续增加。 以国内市场为例，天眼查专业版数据显示，截至5月底，我国现存在业、存续状态的机器人相关企…...
Opencv中的addweighted函数
一.addweighted函数作用 addweighted（）是OpenCV库中用于图像处理的函数，主要功能是将两个输入图像（尺寸和类型相同）按照指定的权重进行加权叠加（图像融合），并添加一个标量值&#x…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...
Nuxt.js 中的路由配置详解
Nuxt.js 通过其内置的路由系统简化了应用的路由配置，使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...
跨链模式：多链互操作架构与性能扩展方案
跨链模式：多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈：模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展（H2Cross架构）： 适配层…...
论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）
宇树机器人多姿态起立控制强化学习框架论文解析 论文解读：交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一） 论文解读：交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...
LLM基础1_语言模型如何处理文本
基于GitHub项目：https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken：OpenAI开发的专业"分词器" torch：Facebook开发的强力计算引擎，相当于超级计算器 理解词嵌入：给词语画"…...
【JavaSE】绘图与事件入门学习笔记
-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角，以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向，距离坐标原点x个像素;第二个是y坐标，表示当前位置为垂直方向，距离坐标原点y个像素。 坐标体系-像素 …...