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

【CSS】跳动文字

news 2026/3/30 10:26:19

文章目录

    • 效果展示
    • 代码实现

效果展示

在这里插入图片描述

代码实现

<!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

手把手教你优化SiC MOSFET模块：从铜带键合到双面散热的5个关键技术

SiC MOSFET功率模块封装优化实战&#xff1a;五大关键技术深度解析 在电力电子领域&#xff0c;碳化硅(SiC)MOSFET功率模块正逐步取代传统硅基IGBT&#xff0c;成为高效率、高功率密度应用的首选。然而&#xff0c;要充分发挥SiC材料的性能优势&#xff0c;封装技术面临前所未…...

编程新知 2026/3/30 10:01:59

通义千问3-Reranker-0.6B部署教程：模型服务SLA保障（P95延迟＜800ms）调优

通义千问3-Reranker-0.6B部署教程&#xff1a;模型服务SLA保障&#xff08;P95延迟<800ms&#xff09;调优 1. 为什么你需要关注这个模型&#xff1f; 如果你正在做搜索系统、智能客服或者文档问答&#xff0c;肯定遇到过这样的问题&#xff1a;用户输入一个问题&#xff…...

编程新知 2026/3/30 6:24:51

RMBG-2.0效果对比：不同光照/背景复杂度下头发分割准确率实测数据表

RMBG-2.0效果对比&#xff1a;不同光照/背景复杂度下头发分割准确率实测数据表 头发&#xff0c;无疑是图像背景去除&#xff08;抠图&#xff09;领域公认的“硬骨头”。无论是电商商品图、人像写真还是短视频素材&#xff0c;发丝边缘的精细度直接决定了最终效果的成败。今天…...

编程新知 2026/3/30 5:56:35

HDC1000温湿度传感器原理与嵌入式实战指南

1. 项目概述Grove - Temperature & Humidity Sensor (HDC1000) 是 Seeed Studio 推出的一款基于德州仪器&#xff08;Texas Instruments&#xff09;HDC1000 芯片的数字温湿度传感器模块。该模块采用标准 Grove 接口&#xff0c;支持 IC 总线通信&#xff0c;专为嵌入式系统…...

编程新知 2026/3/30 4:39:55

InfiniTime智能手表固件完全指南：从零开始打造你的开源智能手表

InfiniTime智能手表固件完全指南&#xff1a;从零开始打造你的开源智能手表 【免费下载链接】InfiniTime Firmware for Pinetime smartwatch written in C and based on FreeRTOS 项目地址: https://gitcode.com/gh_mirrors/in/InfiniTime InfiniTime是一款为Pinetime智…...

编程新知 2026/3/30 3:43:06

智能日程管理系统：OpenClaw+Qwen3-32B自动安排会议时间

智能日程管理系统&#xff1a;OpenClawQwen3-32B自动安排会议时间 1. 为什么需要自动化日程管理 每天早晨打开邮箱&#xff0c;总能看到十几封会议邀请混杂在各类邮件中。手动核对时间、检查日历冲突、协调参会人可用性——这些重复性工作消耗了我至少30%的工作时间。直到上个…...

编程新知 2026/3/30 1:50:19

Android 12 蓝牙权限适配指南：从经典到低功耗的全面解析

1. Android 12蓝牙权限变革全景解读 去年给医疗设备厂商做BLE固件升级功能时&#xff0c;突然发现测试机上的蓝牙扫描失灵了。排查半天才发现是targetSdkVersion升级到31后&#xff0c;沿用老权限方案导致的兼容性问题。这次踩坑经历让我深刻意识到&#xff0c;Android 12的蓝牙…...

编程新知 2026/3/30 0:07:26

**发散创新：用Rust构建Web3.0去中心化身份（DID）验证服务**在Web3.0时代，用户不再依赖中心化的身份提供商（

发散创新&#xff1a;用Rust构建Web3.0去中心化身份&#xff08;DID&#xff09;验证服务 在Web3.0时代&#xff0c;用户不再依赖中心化的身份提供商&#xff08;如Google、微信登录&#xff09;&#xff0c;而是通过去中心化身份&#xff08;Decentralized Identity, DID&…...

编程新知 2026/3/29 23:35:18

深入Linux tcpm框架：从FUSB302芯片看PD协议兼容性那些‘坑’

深入Linux tcpm框架&#xff1a;从FUSB302芯片看PD协议兼容性那些‘坑’ Type-C接口凭借其强大的供电能力和灵活的数据传输特性&#xff0c;已成为现代电子设备的标配。然而&#xff0c;在Linux系统中实现完美的PD协议兼容性&#xff0c;却是一场充满技术陷阱的冒险。本文将带您…...

编程新知 2026/3/29 23:23:10

LM339比较器实战：手把手教你搭建电池电压监测电路（附电路图）

LM339比较器实战&#xff1a;手把手教你搭建电池电压监测电路&#xff08;附电路图&#xff09; 1. 为什么选择LM339作为电池监测核心器件&#xff1f; 在电子设计领域&#xff0c;电压监测是保障设备稳定运行的基础功能之一。LM339作为一款经典的四路电压比较器&#xff0c;…...

编程新知 2026/3/29 23:13:09