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

【CSS】跳动文字

news 2026/3/31 5:15:33

文章目录

    • 效果展示
    • 代码实现

效果展示

在这里插入图片描述

代码实现

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>一颗不甘坠落的流星</title></head><style type="text/css">/* 遮罩盒子样式 */#mask {/* 设置弹性盒子 */display: flex;/* 水平居中 */justify-content: center;/* 垂直居中 */align-items: center;/* 设置高度 */height: 100vh;/* 设置背景颜色 */background-color: black;}/* 文本盒子样式 */#text {/* 字体颜色 */color: greenyellow;}/* 设置动画 */@keyframes donghua{0 {transform: translateY(0px);}20% {transform: translateY(-20px);}40%, 100% {transform: translateY(0px);}}#text span{/* 设置行内块元素 */display: inline-block;/* 添加动画 */animation: donghua 1.5s ease-in-out infinite;/* 利用变量动态计算动画延迟时间 */animation-delay: calc(.1s*var(--i));}</style><body><!-- 遮罩盒子 + 文本盒子--><div id="mask"><div id="text"><!-- style设置变量 -->	<span style="--i:1">原</span><span style="--i:2">神</span><span style="--i:3">启</span><span style="--i:4">动</span><span style="--i:5">中</span><span style="--i:6">.</span><span style="--i:7">.</span><span style="--i:8">.</span></div></div></body><script type="text/javascript"></script>
</html>

相关文章：

【CSS】跳动文字

文章目录 效果展示代码实现 效果展示 代码实现 <!DOCTYPE html> <html><head><meta charset"utf-8" /><title>一颗不甘坠落的流星</title></head><style type"text/css">/* 遮罩盒子样式 */#mask {/* 设…...

编程日记 2023/7/11 9:36:20

arm海思启动udev的错误

近日在配置HI3531D的文件时发现错误 random: udevd: uninitialized urandom read (16 bytes read) random: udevd: uninitialized urandom read (16 bytes read)udev 是一个为你的计算机提供设备事件的 Linux 子系统。通俗来讲就是&#xff0c;当你的计算机上插入了像网卡、外…...

编程日记 2023/7/11 9:02:59

网络协议与攻击模拟-15-DNS协议

DNS 协议 1、了解域名结构 2、 DNS 查询过程 3、在 Windows server 上部署 DNS 4、分析流量 实施 DNS 欺骗 再分析 一、 DNS 1、概念 ● DNS ( domain name system &#xff09;域名系统&#xff0c;作为将域名的 IP 地址的相互映射关系存放在一个分布式的数据库&#xff0…...

编程日记 2023/7/11 8:29:38

ChatGPT将改变教育，而不是摧毁它

01 学校和大学的反应迅速而果断 就在 OpenAI 于 2022 年 11月下旬发布ChatGPT 的几天后&#xff0c;该聊天机器人被广泛谴责为一种免费的论文写作、应试工具&#xff0c;它很容易在作业中作弊。 美国第二大学区洛杉矶联合大学立即阻止了OpenAI网站从其学校网络访问。其他人很…...

编程日记 2023/7/11 7:56:17

springboot在线考试

在线考试系统的开发运用java技术&#xff0c;MIS的总体思想&#xff0c;以及MYSQL等技术的支持下共同完成了该系统的开发&#xff0c;实现了在线考试管理的信息化&#xff0c;使用户体验到更优秀的在线考试管理&#xff0c;管理员管理操作将更加方便&#xff0c;实现目标....

编程日记 2023/7/11 7:22:56

C国演义 [第三章]

第三章 组合分析步骤递归函数的返回值和参数递归结束的条件单层逻辑 组合总和 III 组合 力扣链接 给定两个整数 n 和 k&#xff0c;返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 示例 1&#xff1a; 输入&#xff1a;n 4, k 2 输出&#xff1…...

编程日记 2023/7/11 6:49:35

数字化时代，企业的数据指标体系

在社会节奏越来越快&#xff0c;处理的信息量越来越大的今天&#xff0c;传统的经营管理模式已经适应不了当下的环境。而由经验、情感组成的业务调整以及决策能力不再能正确指导企业走在正确的方向上&#xff0c;所以数据就成为了企业新的业务优化调整和支撑企业高层管理进行决…...

编程日记 2023/7/11 6:16:13

三分钟了解 RocketMQ消息队列

文章目录 基本概念详细介绍主题&#xff08;Topic&#xff09;消息类型&#xff08;MessageType&#xff09;消息队列&#xff08;MessageQueue&#xff09;消息&#xff08;Message&#xff09;消息视图&#xff08;MessageView&#xff09;消息标签&#xff08;MessageTag&am…...

编程日记 2023/7/11 5:42:52

golang redis第三方库github.com/go-redis/redis/v8实践

Redis基本数据类型代码示例# 这里示例使用 go-redis v8 &#xff0c;不过 go-redis latest 是 v9 安装v8&#xff1a;go get github.com/go-redis/redis/v8 Redis 5 种基本数据类型&#xff1a; string 字符串类型&#xff1b;list列表类型&#xff1b;hash哈希表类型&#…...

编程日记 2023/7/11 5:09:30

校园网WiFi IPv6免流上网

ipv6的介绍 IPv6是国际协议的最新版本&#xff0c;用它来取代IPv4主要是为了解决IPv4网络地址枯竭的问题&#xff0c;也在其他很多方面对IPv4有所改进&#xff0c;比如网络的速度和安全性。 IPv4是一个32位的地址&#xff0c;随着用户的增加在2011年国家报道说IPv4的网络地址即…...

编程日记 2023/7/11 4:36:09

java 阿里云直播配置及推拉流地址获取

一、开通阿里云直播 首先进入阿里云直播产品主页&#xff1a;https://www.aliyun.com/product/live 。 点击下方的“立即开通”。 如果是还未注册的用户请按照页面提示进行完成注册并实名认证。 2、首次进入会提示开通服务&#xff0c;点击“开通服务”&#xff0c;然后选择计…...

编程日记 2023/7/11 4:02:48

PostgreSql 限制

参考&#xff1a;https://www.postgresql.org/docs/current/limits.html 项目上限说明单个数据库尺寸无限制null单个实例中数据库数量4,294,950,911null单个数据库中关系数量1,431,650,303null单个关系尺寸32 TB数据块为8k时单个表行数受4,294,967,295页的元组数量限制null单个…...

编程日记 2023/7/11 3:29:27

2023年java还是golang还是c#？

前言 我们可以先来看一下这三门语言各自的优劣 学习曲线&#xff1a;如果你是初学者或对编程相对陌生&#xff0c;Java可能是一个较好的选择。它有广泛的学习资源和社区支持&#xff0c;易于上手。Go也有简单易学的特点&#xff0c;但由于相对较年轻&#xff0c;相关的学习资…...

编程日记 2023/7/11 2:56:06

微服务、SpringBoot、SpringCloud 三者的区别

&#x1f388; 作者&#xff1a;Linux猿 &#x1f388; 简介&#xff1a;CSDN博客专家&#x1f3c6;&#xff0c;华为云享专家&#x1f3c6;&#xff0c;Linux、C/C、云计算、物联网、面试、刷题、算法尽管咨询我&#xff0c;关注我&#xff0c;有问题私聊&#xff01; &…...

编程日记 2023/7/11 2:22:45

2023-07-10 cmake管理的项目中使用vcpkg管理第三方库

一、安装 从Github上克隆Vcpkg仓库然后执行安装命令即可&#xff1a; git clone https://github.com/microsoft/vcpkg .\vcpkg\bootstrap-vcpkg.bat 安装自己需要的第三方库 .\vcpkg\vcpkg install [packages to install] 更多教学可参考&#xff1a; https://learn.microsoft…...

编程日记 2023/7/11 1:49:24

【剑指offer】学习计划day3

​​​​​​​ 目录 一. 前言 二.替换空格 a.题目 b.题解分析 c.AC代码 三. 左旋转字符串 a.题目 b.题解分析 c.AC代码 一. 前言 本系列是针对Leetcode中剑指offer学习计划的记录与思路讲解。详情查看以下链接&#xff1a; 剑指offer-学习计划https://leetcode.cn/stud…...

编程日记 2023/7/11 1:16:02

QT DAY1

做一个窗口界面 #include "mainwindow.h" #include "ui_mainwindow.h"MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow) {ui->setupUi(this);//设置窗口标题、图标this->setWindowTitle("Fly_Chat")…...

编程日记 2023/7/11 0:42:41

Mybatis-puls——条件查询的三种格式+条件查询null判定+查询投影

前言 在mybatis_plus的封装中的Wrapper<T>接口参数就是用于封装查询条件 在测试类中启动如上一个简单的查询&#xff0c;然后控制台运行会输出一大堆无关日志&#xff0c;这里先把这些日志关闭 去除无关日志文件 先新建一个XML配置文件 然后变成如下&#xff0c;这里…...

编程日记 2023/7/11 0:09:20

网络安全（黑客）自学

建议一&#xff1a;黑客七个等级 黑客&#xff0c;对很多人来说充满诱惑力。很多人可以发现这门领域如同任何一门领域&#xff0c;越深入越敬畏&#xff0c;知识如海洋&#xff0c;黑客也存在一些等级&#xff0c;参考知道创宇 CEO ic&#xff08;世界顶级黑客团队 0x557 成员…...

编程日记 2023/7/10 23:35:59

通过一个实际例子说明Django中的数据库操作方法OneToOneField()的用法【数据表“一对一”关系】

当我们在Django中定义一个模型时&#xff0c;可以使用OneToOneField来建立一个一对一的关系。这种关系表示两个模型之间的一种特殊关联&#xff0c;其中一个模型的实例只能与另一个模型的实例关联。 让我们以一个简单的示例来说明OneToOneField的用法。假设我们正在构建一个简…...

编程日记 2023/7/10 23:02:38

AI模型下载加速实战指南：突破ComfyUI大文件传输瓶颈

AI模型下载加速实战指南&#xff1a;突破ComfyUI大文件传输瓶颈 【免费下载链接】ComfyUI-Manager 项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI-Manager 在AI模型训练与部署流程中&#xff0c;模型文件的高效获取常常成为制约工作流效率的关键环节。当面对动…...

编程新知 2026/3/31 5:02:03

@rc-component/slider拖拽轨道功能解析：提升用户体验的5个技巧

rc-component/slider拖拽轨道功能解析&#xff1a;提升用户体验的5个技巧 【免费下载链接】slider React Slider 项目地址: https://gitcode.com/gh_mirrors/sl/slider rc-component/slider是一款功能强大的React滑块组件&#xff0c;其拖拽轨道功能为用户提供了直观便捷…...

编程新知 2026/3/31 4:50:01

3步打造你的专属AI角色扮演世界：SillyTavern终极指南

3步打造你的专属AI角色扮演世界&#xff1a;SillyTavern终极指南 【免费下载链接】SillyTavern LLM Frontend for Power Users. 项目地址: https://gitcode.com/GitHub_Trending/si/SillyTavern 你是否厌倦了千篇一律的AI对话&#xff1f;是否渴望创造真正有灵魂的虚拟角…...

编程新知 2026/3/31 3:08:13

Vercel预览部署的隐藏玩法：除了看UI，还能这样测API和监控性能

Vercel预览部署的隐藏玩法&#xff1a;除了看UI&#xff0c;还能这样测API和监控性能 当大多数开发者将Vercel的预览部署视为前端UI的"展示橱窗"时&#xff0c;一个更强大的应用场景正被悄然忽视——它完全可以成为全栈开发的预发布验证平台。想象一下&#xff1a;在…...

编程新知 2026/3/31 2:33:46

VIT模型IP核需要修改的地方

导入路径 "D:\VIT\HG-PIPE\instances\proj_ATTN0\work"选择“open project”整合多个 HLS IP 时 遇到“撞名”此时会报错&#xff1a;Top function not found: there is no function named top INFO: [HLS 200-1510] Running: set_directive_top -name top top...

编程新知 2026/3/31 2:09:23

Ubuntu 23.04 避坑指南：pip install virtualenv 报错 extern-managed-environment 的3种解决方案

Ubuntu 23.04 Python包管理新规深度解析&#xff1a;安全与灵活性的平衡之道 最近升级到Ubuntu 23.04的Python开发者们可能遇到了一个令人困惑的新错误——当尝试使用pip install安装包时&#xff0c;系统会抛出"externally-managed-environment"的警告并拒绝执行。这…...

编程新知 2026/3/31 0:52:49

视频技术三要素：码率、帧率与分辨率的实战解析

1. 视频三要素的基础认知 第一次接触视频制作时&#xff0c;我被各种专业术语搞得晕头转向。直到有前辈告诉我&#xff1a;"其实只要搞懂码率、帧率和分辨率这三个参数&#xff0c;就能解决80%的视频质量问题。"这句话让我茅塞顿开&#xff0c;今天我就把这些年积累的…...

编程新知 2026/3/31 0:42:46

从零开始玩转Arduino：手把手教你用MOS管和继电器控制大电流设备（附电路图）

从零开始玩转Arduino&#xff1a;手把手教你用MOS管和继电器控制大电流设备&#xff08;附电路图&#xff09; 当你第一次尝试用Arduino控制大功率设备时&#xff0c;可能会遇到一个常见问题&#xff1a;小小的开发板输出引脚根本无法直接驱动电机、灯带或加热管。这时候&#…...

编程新知 2026/3/30 23:43:09

Agent-S实战指南：突破性智能体框架如何实现72.6%人类级计算机交互性能

Agent-S实战指南&#xff1a;突破性智能体框架如何实现72.6%人类级计算机交互性能 【免费下载链接】Agent-S Agent S: an open agentic framework that uses computers like a human 项目地址: https://gitcode.com/GitHub_Trending/ag/Agent-S 在人工智能与计算机交互的…...

编程新知 2026/3/30 23:39:07

3步实现URL效率革命：Redirector极简方案让浏览器跳转更智能

3步实现URL效率革命&#xff1a;Redirector极简方案让浏览器跳转更智能 【免费下载链接】Redirector Browser extension (Firefox, Chrome, Opera, Edge) to redirect urls based on regex patterns, like a client side mod_rewrite. 项目地址: https://gitcode.com/gh_mirr…...

编程新知 2026/3/30 22:58:12