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

【CSS】跳动文字

文章目录

    • 效果展示
    • 代码实现

效果展示

在这里插入图片描述

代码实现

<!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 {/* 设…...

arm海思启动udev的错误

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

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

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

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

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

springboot在线考试

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

C国演义 [第三章]

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

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

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

三分钟了解 RocketMQ消息队列

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

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哈希表类型&#…...

校园网WiFi IPv6免流上网

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

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

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

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年java还是golang还是c#?

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

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

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

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…...

【剑指offer】学习计划day3

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

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")…...

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

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

网络安全(黑客)自学

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

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

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

业务系统对接大模型的基础方案:架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

代码规范和架构【立芯理论一】(2025.06.08)

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

OD 算法题 B卷【正整数到Excel编号之间的转换】

文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的&#xff1a;a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...