前端 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}。两个数组的和相同。 定义一次合并操作可以将某数组内相邻的两个数合并为一个新数，新数的值是原来两…...
基于Claude API构建AI代码生成工具：从API封装到工程化实践
1. 项目概述与核心价值最近在开发者社区里，一个名为ashish200729/claude-code-source-code的项目标题引起了不小的讨论。乍一看，这个标题很容易让人产生误解，以为这是某个知名AI模型的源代码被公开了。但作为一名在软件开发和开源领域摸爬滚打…...
LLM应用快速演示框架：从架构解析到智能体开发的实战指南
1. 项目概述：一个面向开发者的LLM应用快速演示框架最近在GitHub上闲逛，发现了一个名为wronai/llm-demo的项目，点进去一看，瞬间觉得眼前一亮。这可不是又一个简单的“Hello World”式的大语言模型调用示例，而是一个结构…...
用STM32+LoRa+阿里云IoT Studio，我DIY了一个低成本畜牧电子围栏（附完整代码）
基于STM32与LoRa的智能畜牧围栏系统开发实战 在广袤的牧区，牲畜走失一直是困扰牧民的核心问题。传统物理围栏不仅成本高昂，在草原这类开放地形中实施难度也很大。本文将详细介绍如何利用STM32微控制器、LoRa远距离通信模块和阿里云IoT Studio平台&#x…...
2026产品经理学数据分析对升职的价值
一、数据分析能力对产品经理升职的重要性数据分析能力已成为产品经理的核心竞争力之一。掌握数据分析技能可以帮助产品经理更精准地决策，提升产品成功率，从而在职业发展中占据优势。二、数据分析在产品经理工作中的具体应用通过数据分析优化产品功能迭代…...
别再让Ubuntu20.04时间错乱了！用hwclock和timedatectl搞定硬件时钟时区（附原理详解）
彻底解决Ubuntu 20.04时间同步问题：硬件时钟与系统时钟的深度调校指南 每次重启电脑后，系统时间总是不准？在Windows和Ubuntu双系统间切换时，时间显示总是莫名其妙差8小时？这些困扰Linux用户多年的"时间错乱"…...
手把手教你用Vivado 2020.1给MicroBlaze工程挂上DDR3内存（附完整IP核配置流程）
从BRAM到DDR3：MicroBlaze系统内存扩展实战指南 在FPGA嵌入式开发领域，MicroBlaze处理器因其灵活性和可定制性成为众多项目的首选。当系统复杂度从简单的"Hello World"升级到需要处理大量数据时，片上BRAM的有限容量很快会成为瓶颈。…...
可穿戴智能服饰制作：NeoPixel灯带与Circuit Playground的集成实践
1. 项目概述：当可穿戴电子遇上创意服饰如果你和我一样，既着迷于微控制器上跑起的第一行代码，又无法抗拒布料、针线和那些闪闪发光的小玩意儿，那么这个项目就是为你准备的。将NeoPixel灯带和Circuit Playground微控制器“缝”进一件…...
基于Docker与MCP协议构建AI智能体安全扩展工具箱
1. 项目概述：一个为AI应用量身打造的“服务管家”最近在折腾AI应用开发，特别是那些基于大语言模型（LLM）的智能体（Agent）时，我遇到了一个挺普遍但很棘手的问题：我的AI助手能力很强&am…...
如何高效配置Cool Request插件：Spring Boot接口调试的终极实践指南
如何高效配置Cool Request插件：Spring Boot接口调试的终极实践指南 【免费下载链接】cool-request IDEA API、Java Method debug tools 项目地址: https://gitcode.com/gh_mirrors/co/cool-request Cool Request是一款专为IntelliJ IDEA设计的强大HTTP接口调…...
骨传导耳机品牌Mojawa完成数千万元A+轮融资，发力AI运动智能平台
硬氪获悉，苏州索迩电子技术有限公司近日完成数千万元人民币的A轮融资，由正海资本领投。资金将用于拓展海外线下渠道和推进产品AI智能化研发。骨传导耳机市场增长显著在音频产品市场，骨传导耳机因无线和开耳式聆听技术需求增加而显著增长。202…...