前端 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}。两个数组的和相同。 定义一次合并操作可以将某数组内相邻的两个数合并为一个新数，新数的值是原来两…...
后进先出（LIFO）详解
LIFO 是 Last In, First Out 的缩写，中文译为后进先出。这是一种数据结构的工作原则，类似于一摞盘子或一叠书本： 最后放进去的元素最先出来 -想象往筒状容器里放盘子： （1）你放进的最后一个盘子（…...
云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地
借阿里云中企出海大会的东风，以**「云启出海，智联未来｜打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办，现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...
云原生玩法三问：构建自定义开发环境
云原生玩法三问：构建自定义开发环境 引言 临时运维一个古董项目，无文档，无环境，无交接人，俗称三无。 运行设备的环境老，本地环境版本高，ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...
用机器学习破解新能源领域的“弃风”难题
音乐发烧友深有体会，玩音乐的本质就是玩电网。火电声音偏暖，水电偏冷，风电偏空旷。至于太阳能发的电，则略显朦胧和单薄。 不知你是否有感觉，近两年家里的音响声音越来越冷，听起来越来越单薄？ —…...
NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合
在汽车智能化的汹涌浪潮中，车辆不再仅仅是传统的交通工具，而是逐步演变为高度智能的移动终端。这一转变的核心支撑，来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒（T-Box）方案：NXP S32K146 与…...
招商蛇口 | 执笔CID，启幕低密生活新境
作为中国城市生长的力量，招商蛇口以“美好生活承载者”为使命，深耕全球111座城市，以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子，招商蛇口始终与城市发展同频共振，以建筑诠释对土地与生活的…...
Go 并发编程基础：通道（Channel）的使用
在 Go 中，Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式，用于在多个 Goroutine 之间传递数据，从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...
C++ 设计模式 《小明的奶茶加料风波》
👨🎓 模式名称：装饰器模式（Decorator Pattern） 👦 小明最近上线了校园奶茶配送功能，业务火爆，大家都在加料： 有的同学要加波霸 🟤，有的要加椰果…...
十九、【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建
【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建 前言准备工作第一部分：回顾 Django 内置的 `User` 模型第二部分：设计并创建 `Role` 和 `UserProfile` 模型第三部分：创建 Serializers第四部分：创建 ViewSets第五部分：注册 API 路由第六部分：后端初步测…...