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

前端 CSS 经典：好看的标题动画

news 2026/4/2 2:57:38

前言：好看的标题动画实现。

效果：

<!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 经典：好看的标题动画

前言&#xff1a;好看的标题动画实现。 效果&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><…...

编程日记 2024/5/24 4:57:39

Vue项目打包优化（element+echarts+vue使用cdn）

如何打包查看所有资源大小&#xff1f; 使用插件&#xff1a;webpack-bundle-analyzer 效果图&#xff1a; 安装webpack-bundle-analyzer 第一步&#xff0c;终端执行 npm instatll webpack-bundle-analyzer --save-dev第二步&#xff0c;vue.config.js配置 module.export…...

编程日记 2024/5/24 4:56:38

【ARM 嵌入式 C 入门及渐进 6.1 -- ARMv8 C 内嵌汇编写系统寄存器的函数实现】

请阅读【嵌入式开发学习必备专栏】 文章目录 ARMv8 C 内嵌汇编写系统寄存器 ARMv8 C 内嵌汇编写系统寄存器 在ARMv8架构下&#xff0c;使用C语言结合内嵌汇编实现将一个值写入特定系统寄存器的函数可以按照下面的方法进行。 下面这个示例展示了如何将一个uint64_t类型的值写入…...

编程日记 2024/5/24 4:55:36

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&#xff0c;即热点&#xff0c;使手机等终端可以连接参考工程 Esp…...

编程日记 2024/5/24 4:54:36

【课后练习分享】Java用户注册界面设计和求三角形面积的图形界面程序

目录 java编程题&#xff08;每日一练&#xff09;&#xff1a; 问题一的答案代码如下&#xff1a; 问题一的运行截图如下&#xff1a; 问题二的答案代码如下&#xff1a; 问题二的运行截图如下&#xff1a; java编程题&#xff08;每日一练&#xff09;&#xff1a; 1.…...

编程日记 2024/5/24 4:53:34

三维空间坐标系变换（旋转平移）

在探究三维空间下的变换前&#xff0c;首先研究二位空间&#xff0c;因为比较直观&#xff0c;再推广到三维空间。 首先应该清楚的一点是&#xff1a;旋转、平移对于坐标系下的点以及坐标系本身而言都是相对的&#xff08;运动的相对性&#xff09;。 例如&#xff1a; X O Y …...

编程日记 2024/5/24 4:51:32

OC笔记之foundation框架

OC学习笔记&#xff08;三&#xff09; 文章目录 OC学习笔记&#xff08;三&#xff09;常用Foundation框架结构体NSRangeNSRange结构体的定义定义 NSRange 的方法打印Range的相关信息NSRange的实际运用查找子字符串返回NSRange结构体 NSPointNSRect NSStringNSString的创建NSS…...

编程日记 2024/5/24 4:50:30

Docker部署springboot包并联通MySQL

Docker部署jar 实现功能 部署springboot下发布的jar包不同docker容器之间通信&#xff08;如MySQL访问、Redis访问&#xff09;多个jar包部署 参考文献 Just a moment… Just a moment… https://www.jb51.net/article/279449.htm springboot配置 这里使用多yaml配置文件&…...

编程日记 2024/5/24 4:49:29

多帧激光点云基于标定参数进行融合拼接

1、前言 在三维视觉技术蓬勃发展的今天&#xff0c;点云作为捕获和表示三维环境的基础数据形式&#xff0c;扮演着至关重要的角色。点云融合拼接技术&#xff0c;作为连接孤立点云片段、构建连续、全面三维场景的核心过程&#xff0c;对于自动驾驶、机器人导航、三维建模以及地…...

编程日记 2024/5/24 4:48:28

python数据类型之字符串

目录 1.字符串概念和注意事项 2.字符串内置函数 3.字符串的索引、切片和遍历 4.字符串运算符 5.字符串常用方法 性质判断 开头结尾判断 是否存在某个子串 大小写等格式转化 子串替换 删除两端空白字符 格式化字符串 分割与合并 6.字符串模板 7.exec 函数 8.字符…...

编程日记 2024/5/24 4:47:26

Vue3实战笔记（38）—粒子特效终章

文章目录 前言一、怎样使用官方提供的特效二、海葵特效总结 前言 官方还有很多漂亮的特效&#xff0c;但是vue3只有一个demo&#xff0c;例如我前面实现的两个页面就耗费了一些时间&#xff0c;今天记录一下tsparticles官方内置的几个特效的使用方法&#xff0c;一般这几个就足…...

编程日记 2024/5/24 4:46:25

晶体振荡器

一、晶振与晶体区别 晶振是有源晶振的简称&#xff0c;又叫振荡器&#xff0c;英文名称是oscillator&#xff0c;内部有时钟电路&#xff0c;只需供电便可产生振荡信号&#xff1b;晶体是无源晶振的简称&#xff0c;也叫谐振器&#xff0c;英文名称是crystal&#xff0c;是无极…...

编程日记 2024/5/24 4:45:24

单词可交互的弧形文本

在一个项目中&#xff0c;要求把少儿读本做成电子教材呈现出来&#xff0c;电子书的排版要求跟纸质书一致。其中&#xff0c;英语书有个需求&#xff1a;书中有些不规则排版的文本&#xff08;如下图所示&#xff09;&#xff0c;当随书音频播放时&#xff0c;被读到的文本要求…...

编程日记 2024/5/24 4:42:21

Linux——进程信号(一)

1.信号入门 1.1生活中的信号 什么是信号? 结合实际红绿灯、闹钟、游戏中的"&#xff01;"等等这些都是信号。 以红绿灯为例子&#xff1a; 一看到红绿灯我们就知道&#xff1a;红灯停、绿灯行&#xff1b;我们不仅知道它是一个红绿灯而且知道当其出现不同的状况…...

编程日记 2024/5/24 4:40:19

centos9 stream在线安装NVIDIA驱动（rockylinux9.4也成功安装nvidia驱动）

Install NVIDIA Drivers on CentOS Stream 9&#xff08;rockylinux9.4成功&#xff09; 主板为技嘉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 …...

编程日记 2024/5/24 4:39:18

springmvc不同格式的参数解析

参数解析 application/x-www-form-urlencoded格式 这种格式就是传统的表单提交格式&#xff0c;就是一个个的键值对&#xff0c;会进行url编码&#xff0c;使用springmvc接收时使用RequestParam来进行接收&#xff0c;与传入的字段一一对应&#xff0c;此时使用的参数处理器是R…...

编程日记 2024/5/24 4:38:17

Unity3D让BoxCollider根据子物体生成自适应大小

系列文章目录 unity工具 文章目录 系列文章目录unity工具 &#x1f449;前言&#x1f449;一、编辑器添加&#x1f449;二、代码动态添加的方法(第一种)&#x1f449;三、代码动态添加的方法(第二种)&#x1f449;四、重新设置模型的中心点&#x1f449;壁纸分享&#x1f449;…...

编程日记 2024/5/24 4:36:15

WSL 2 installation is incomplete.

使用的wsl2版本很旧&#xff0c;因此需要手动更新。 https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi...

编程日记 2024/5/24 4:34:12

Servlet的request对象

request对象的继承关系 1.HttpServletRequest接口继承了ServletRequest接口&#xff0c;对其父接口进行了扩展&#xff0c;可以处理满足所有http协议的请求 2.HttpServletRequest和ServletRequest都是接口&#xff0c;不能创建对象&#xff0c;因此在tomcat底层定义实现类并创…...

编程日记 2024/5/24 4:32:11

蓝桥杯-合并数列

小明发现有很多方案可以把一个很大的正整数拆成若干正整数的和。他采取了其中两种方案&#xff0c;分别将它们列为两个数组 {a1, a2, …, an} 和 {b1, b2, …, bm}。两个数组的和相同。 定义一次合并操作可以将某数组内相邻的两个数合并为一个新数&#xff0c;新数的值是原来两…...

编程日记 2024/5/24 4:29:08

2025最权威的十大AI学术神器推荐榜单

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 于人工智能生成内容也就是AIGC愈发普及的当前情形下&#xff0c;把它的机械痕迹以及同质化特…...

编程新知 2026/4/2 1:38:13

AG-UI协议实战：构建智能体驱动的动态前端交互系统

1. AG-UI协议&#xff1a;智能体与前端交互的新范式 第一次听说AG-UI协议时&#xff0c;我正在为一个电商项目头疼——后台AI生成的商品推荐总需要手动同步到前端&#xff0c;代码里到处是setState和事件监听。直到发现这个协议&#xff0c;才明白原来智能体和前端可以像两个老…...

编程新知 2026/4/2 1:24:11

fSpy完全上手指南：从基础到实战的零门槛教程

fSpy完全上手指南&#xff1a;从基础到实战的零门槛教程 【免费下载链接】fSpy A cross platform app for quick and easy still image camera matching 项目地址: https://gitcode.com/gh_mirrors/fs/fSpy 当你需要将一张普通的2D照片转换为精确的3D场景时&#xff0c;…...

编程新知 2026/4/2 1:03:55

Polars 2.0清洗性能天花板在哪？实测对比Dask/Modin/Vaex：单机1TB数据清洗仅需11.3秒（附完整安装脚本）

第一章&#xff1a;Polars 2.0 大规模数据清洗技巧Polars 2.0 引入了更严格的惰性执行模型、增强的字符串与时间处理能力&#xff0c;以及原生支持多线程 I/O 的 LazyFrame API&#xff0c;显著提升了 TB 级数据清洗的吞吐与可控性。相比 Pandas&#xff0c;其列式内存布局与零…...

编程新知 2026/4/2 0:51:48

三菱PLC与组态王四层电梯控制系统：详细图纸与IO分配解释

三菱PLC和组态王4层电梯四层电梯控制系统 我们主要的后发送的产品有&#xff0c;带解释的梯形图接线图原理图图纸&#xff0c;io分配&#xff0c;组态画面实验室四层电梯模型卡成狗的时候&#xff0c;真的恨自己当初梯形图只会写互锁单按钮那种幼儿园题。后来拆前辈的旧板子加…...

编程新知 2026/4/2 0:41:20

泰金新能科创板上市：市值79亿 预计第一季净利降幅超45%

雷递网 雷建平 3月31日西安泰金新能科技股份有限公司&#xff08;简称&#xff1a;“泰金新能”&#xff0c;股票代码&#xff1a;“688813”&#xff09;今日在上交所上市。泰金新能发行价为26.28元/股&#xff0c;发行4000万股&#xff0c;募资总额为10.51亿元。泰金新能开盘…...

编程新知 2026/4/1 23:54:39

编程小白的第一课：用快马AI零代码基础创建个人技能展示网站

作为一个刚接触编程的新手&#xff0c;我最近尝试用InsCode(快马)平台做了一个个人技能展示网站。整个过程比我预想的简单很多&#xff0c;特别适合零基础的同学上手。下面分享我的具体实现过程和心得&#xff1a; 项目规划与结构设计 刚开始完全不懂代码结构&#xff0c;但平台…...

编程新知 2026/4/1 22:19:19

请解释 Linux 系统中的内核模块管理，并描述如何加载和卸载模块。

在 Linux 系统中&#xff0c;内核模块&#xff08;Kernel Modules&#xff09; 是可以在不重新编译或重启内核的情况下&#xff0c;动态添加到运行中内核的代码片段。它们通常用于支持新的硬件设备、文件系统或网络协议。 这种机制使得 Linux 内核保持精简&#xff08;核心功能…...

编程新知 2026/4/1 22:11:12

小型纯电动汽车轮毂电机及大角度转向系统的数字化设计【含catia、solidworks、CAD图纸、答辩PPT、说明书】

小型纯电动汽车轮毂电机与大角度转向系统的数字化设计&#xff0c;是新能源汽车领域的关键技术突破方向。轮毂电机通过将驱动装置集成于车轮内部&#xff0c;实现了动力传递路径的简化与能量利用效率的提升&#xff0c;其分布式驱动特性使车辆具备更灵活的扭矩分配能力&#xf…...

编程新知 2026/4/1 22:04:57

第一次降AIGC率不知道从哪入手？这份保姆级操作手册帮你

第一次操作的话&#xff0c;照着下面的步骤来&#xff0c;15分钟内搞定降AIGC率、降AI工具保姆级测评2026、降AI。 工具选嘎嘎降AI&#xff08;www.aigcleaner.com&#xff09;&#xff0c;达标率99.26%&#xff0c;有退款保障&#xff0c;操作也不复杂。 准备工作 需要准备的…...

编程新知 2026/4/1 21:24:30