简约的悬浮动态特效404单页源HTML码
源码介绍
简约的悬浮动态特效404单页源HTML码，页面简约美观，可以做网站错误页或者丢失页面，将下面的代码放到空白的HTML里面，然后上传到服务器里面，设置好重定向即可
效果预览
完整源码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>galaxy not found </title><style>body {margin: 0;font-size: 20px;
}* {box-sizing: border-box;
}.container {position: relative;display: flex;align-items: center;justify-content: center;height: 100vh;background: white;color: black;font-family: arial, sans-serif;overflow: hidden;
}.content {position: relative;width: 600px;max-width: 100%;margin: 20px;background: white;padding: 60px 40px;text-align: center;box-shadow: -10px 10px 67px -12px rgba(0, 0, 0, 0.2);opacity: 0;animation: apparition 0.8s 1.2s cubic-bezier(0.39, 0.575, 0.28, 0.995) forwards;
}
.content p {font-size: 1.3rem;margin-top: 0;margin-bottom: 0.6rem;letter-spacing: 0.1rem;color: #595959;
}
.content p:last-child {margin-bottom: 0;
}
.content button {display: inline-block;margin-top: 2rem;padding: 0.5rem 1rem;border: 3px solid #595959;background: transparent;font-size: 1rem;color: #595959;text-decoration: none;cursor: pointer;font-weight: bold;
}.particle {position: absolute;display: block;pointer-events: none;
}
.particle:nth-child(1) {top: 51.2946979038%;left: 52.4233432245%;font-size: 11px;filter: blur(0.02px);animation: 35s floatReverse2 infinite;
}
.particle:nth-child(2) {top: 20.4379562044%;left: 45.988258317%;font-size: 22px;filter: blur(0.04px);animation: 37s float infinite;
}
.particle:nth-child(3) {top: 67.7300613497%;left: 24.6305418719%;font-size: 15px;filter: blur(0.06px);animation: 36s floatReverse2 infinite;
}
.particle:nth-child(4) {top: 62.1454993835%;left: 36.5974282888%;font-size: 11px;filter: blur(0.08px);animation: 26s floatReverse infinite;
}
.particle:nth-child(5) {top: 5.8968058968%;left: 78.8954635108%;font-size: 14px;filter: blur(0.1px);animation: 34s float2 infinite;
}
.particle:nth-child(6) {top: 35.1219512195%;left: 38.2352941176%;font-size: 20px;filter: blur(0.12px);animation: 29s floatReverse infinite;
}
.particle:nth-child(7) {top: 88.3435582822%;left: 17.7339901478%;font-size: 15px;filter: blur(0.14px);animation: 35s floatReverse2 infinite;
}
.particle:nth-child(8) {top: 34.398034398%;left: 12.8205128205%;font-size: 14px;filter: blur(0.16px);animation: 37s float infinite;
}
.particle:nth-child(9) {top: 34.0632603406%;left: 35.2250489237%;font-size: 22px;filter: blur(0.18px);animation: 36s floatReverse infinite;
}
.particle:nth-child(10) {top: 41.0256410256%;left: 1.9627085378%;font-size: 19px;filter: blur(0.2px);animation: 38s floatReverse2 infinite;
}
.particle:nth-child(11) {top: 37.0731707317%;left: 34.3137254902%;font-size: 20px;filter: blur(0.22px);animation: 21s float2 infinite;
}
.particle:nth-child(12) {top: 87.2549019608%;left: 32.4803149606%;font-size: 16px;filter: blur(0.24px);animation: 26s floatReverse infinite;
}
.particle:nth-child(13) {top: 62.7450980392%;left: 3.937007874%;font-size: 16px;filter: blur(0.26px);animation: 28s float infinite;
}
.particle:nth-child(14) {top: 93.137254902%;left: 3.937007874%;font-size: 16px;filter: blur(0.28px);animation: 26s floatReverse infinite;
}
.particle:nth-child(15) {top: 30.5418719212%;left: 63.2411067194%;font-size: 12px;filter: blur(0.3px);animation: 39s floatReverse2 infinite;
}
.particle:nth-child(16) {top: 6.8126520681%;left: 62.6223091977%;font-size: 22px;filter: blur(0.32px);animation: 29s float infinite;
}
.particle:nth-child(17) {top: 93.2038834951%;left: 68.359375%;font-size: 24px;filter: blur(0.34px);animation: 37s float2 infinite;
}
.particle:nth-child(18) {top: 73.2600732601%;left: 3.9254170756%;font-size: 19px;filter: blur(0.36px);animation: 31s floatReverse2 infinite;
}
.particle:nth-child(19) {top: 68.7116564417%;left: 17.7339901478%;font-size: 15px;filter: blur(0.38px);animation: 28s float2 infinite;
}
.particle:nth-child(20) {top: 17.4757281553%;left:相关文章：
简约的悬浮动态特效404单页源HTML码
源码介绍 简约的悬浮动态特效404单页源HTML码，页面简约美观，可以做网站错误页或者丢失页面，将下面的代码放到空白的HTML里面，然后上传到服务器里面，设置好重定向即可 效果预览 完整源码 <!DOCTYPE html> <html><head><meta charset="utf-8&q…...
Golang 创建 Excel 文件
经常会遇到需要导出数据报表的需求，除了可以通过 encoding/csv 导出 CSV 以外，还可以使用 https://github.com/qax-os/excelize 导出 xlsx 等格式的 excel，下面封装了一个方法，支持多 sheet 的 excel 数据生成，导出按需…...
探索GitHub上的两个革命性开源项目
在数字世界中，总有一些项目能够以其创新性和实用性脱颖而出，吸引全球开发者的目光。今天，我们将深入探索GitHub上的两个令人惊叹的开源项目：Comic Translate和GPTPDF，它们不仅改变了我们处理信息的方式，还极…...
SpringBoot框架学习笔记（三）：Lombok 和 Spring Initailizr
1 Lombok 1.1 Lombok 介绍 （1）Lombok 作用 简化JavaBean开发，可以使用Lombok的注解让代码更加简洁Java项目中，很多没有技术含量又必须存在的代码：POJO的getter/setter/toString；异常处理；I/O…...
【ASP.NET网站传值问题】“object”不包含“GetEnumerator”的公共定义，因此 foreach 语句不能作用于“object”类型的变量等
问题一：不允许遍历 原因：实体未强制转化 后端: ViewData["CateGroupList"] grouplist; 前端加上：var catelist ViewData["CateGroupList"] as List<Catelogue>; 这样就可以遍历catelist了 问题二：…...
Stateflow中的状态转换表
状态转换表是表达顺序模态逻辑的另一种方式。不要在Stateflow图表中以图形方式绘制状态和转换，而是使用状态转换表以表格格式表示模态逻辑。 使用状态转换表的好处包括： 易于对类列车状态机进行建模，其中模态逻辑涉及从一个状态到其邻居的转换…...
结合Redis解决接口幂等性问题
结合Redis解决接口幂等性问题 引言正文收获 引言 该问题产生背景是根据需求描述，要求对已发布的课程能进行编辑修改，并且要求能进行回滚。 幂等性问题描述：对同一个接口并发请求产生的结果是不变的。 Get 请求以及 Delete 请求天然保证幂等…...
2024算力基础设施安全架构设计与思考（免费下载）
算网安全体系是将数据中心集群、算力枢纽、一体化大数据中心三个层级的安全需求进行工程化解耦，从国家安全角度统筹设计，通过安全 服务化方式，依托威胁情报和指挥协同通道将三层四级安全体系串联贯通，达成一体化大数据安全目标。 …...
ExoPlayer架构详解与源码分析（15）——Renderer
系列文章目录 ExoPlayer架构详解与源码分析（1）——前言 ExoPlayer架构详解与源码分析（2）——Player ExoPlayer架构详解与源码分析（3）——Timeline ExoPlayer架构详解与源码分析（4）—…...
网络安全-等级保护制度介绍
一、等保发展历程 （1）1994国务院147号令 第一次提出等级保护概念，要求对信息系统分等级进行保护 （2）1999年GB17859 国家强制标准发布，信息系统等级保护必须遵循的法规 （3）2005年公安…...
【介绍下大数据组件之Storm】
🎥博主：程序员不想YY啊 💫CSDN优质创作者，CSDN实力新星，CSDN博客专家 🤗点赞🎈收藏⭐再看💫养成习惯 ✨希望本文对您有所裨益，如有不足之处，欢迎在评论区提出…...
React Hook 总结（React 萌新升级打怪中...）
1 useCallback useMemo 和 useCallback 接收的参数都是一样，都是在其依赖项发生变化后才执行，都是返回缓存的值，区别在于 useMemo 返回的是函数运行的结果，useCallback 返回的是函数。 当需要使用 useCallback 的情况通常包括以…...
Typora 1.5.8 版本安装下载教程 (轻量级 Markdown 编辑器)，图文步骤详解，免费领取
文章目录 软件介绍软件下载安装步骤激活步骤 软件介绍 Typora是一款基于Markdown语法的轻量级文本编辑器，它的主要目标是为用户提供一个简洁、高效的写作环境。以下是Typora的一些主要特点和功能： 实时预览：Typora支持实时预览功能࿰…...
mac docker no space left on device
mac 上 docker 拉取镜像报错 Error response from daemon: write /var/lib/docker/tmp/docker-export-3995807640/b8464f52498789c4ebbc063d508f04e8d2586567fbffa475e3cd9afd3c5a7cf2/layer.tar: no space left on device解决： 增加 docker 虚拟磁盘大小。如下图...
单片机主控的基本电路
论文 1.复位电路 2.启动模式设置接口 3.VBAT供电接口 4.MCU 基本电路 5.参考电压选择端口...
【19】读感 - 架构整洁之道(一)
概述 《架构整洁之道》一书中有提到设计和架构的感念，它们究竟是什么？书是这么说的，它们的层次不一样，架构更“高层级”的说法，这类讨论一般都把“底层”的实现细节排除在外。而设计往往指代的具体的系统底层组织结构…...
多层全连接神经网络（三）---分类问题
问题介绍 机器学习中的监督学习主要分为回归问题和分类问题，我们之前已经讲过回归问题了，它希望预测的结果是连续的，那么分类问题所预测的结果就是离散的类别。这时输入变量可以是离散的，也可以是连续的，而监督学习从数…...
签名优化：请求数据类型不是`application/json`,将只对随机数进行签名计算，例如文件上传接口。
文章目录 I 签名进行请求数据类型类型判断1.1 常见的ContentType1.2 签名切面处理1.3 文件上传案例1.4 处理接口信息背景： 文件上传接口的请求数据类型通常为multipart/form-data,方便携带文本域和使用接口文档进行调试。 如果携带JSON数据，不方便调试接口。 前端数据也要特…...
PostgreSQL的Json数据类型如何使用
PostgreSQL中的JSON数据类型提供了一种灵活的方式来存储JSON（JavaScript Object Notation）数据。JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在PostgreSQL中，你可以使用JSON和JSONB&…...
SpringData JPA Mongodb 查询部分字段
JPA 网上用的好像不多，找了好多材料以后最终找了这个可行的方案： Query(fields "{tender_id:1,_id:0}")List<MGPltTender> findByTenderIdIsNotNull(PageRequest pageRequest); 调用： Sort sort Sort.by(popularType.getC…...
NC65 设置下拉列表框值
NC65 设置下拉列表框值，如人员任职信息的异动事件： // 只有在入职登记时，才为异动事件下拉框过滤掉【离职】和【离职后变动】两个item DefaultConstEnum[] enumItems initTransevent(); BillItem item getBillCardPanel().getHeadItem(Psn…...
小阿轩yx-高性能内存对象缓存
小阿轩yx-高性能内存对象缓存 案例分析 案例概述 Memcached 是一款开源的高性能分布式内存对象缓存系统用于很多网站提高访问速度，尤其是需要频繁访问数据的大型网站是典型的 C/S 架构，需要构建 Memcached 服务器端与 Memcached API 客户端用 C 语言…...
华中师范大学学报人文社会科学版
一、《华中师范大学学报(人文社会科学版)》是国家教育部主管、华中师范大学主办的人文社会科学综合性学术期刊。本刊用稿以质量为标准,不分内稿外稿。文稿一经发表,即付报酬,不收版面费。 二、根据教育部和新闻出版总署颁发的社会科学学报编排规范,来稿应注意以下各项: 1. 题…...
CI/CD的node.js编译报错npm ERR! network request to https://registry.npmjs.org/
1、背景： 在维护paas云平台过程中，有研发反馈paas云平台上的CI/CD的前端流水线执行异常。 2、问题描述： 流水线执行的是前端编译，使用的是node.js环境。报错内容如下： 2024-07-18T01:23:04.203585287Z npm ERR! code E…...
用ssh tunnel的方式设置 AWS DocumentDB 公网访问
AWS DocumentDB的设定是只允许VPC内进行访问的，同时官方文档给了步骤，通过ssh tunnel的方式，可以从公网，或者从VPC外的网络，对DocumentDB进行访问。 我阅读了AWS官方文档并测试了这个步骤，如下是详细的步骤…...
基于电鸿（电力鸿蒙）的边缘计算网关，支持定制
1 产品信息 边缘计算网关基于平头哥 TH1520 芯片，支持 OpenHarmony 小型系统，是 连接物联网设备和云平台的重要枢纽，可应用于城市基础设施，智能工厂，智能建筑，营业网点，运营 服务中心相关场…...
WPF之URI的使用
pack://application:, pack://application:, 是一个在 WPF (Windows Presentation Foundation) 应用程序中用于指定资源位置的 URI (统一资源标识符) 方案的特定格式。这个格式用于访问嵌入在应用程序程序集（assemblies）中的资源，如图像、XA…...
Web开发：ASP.NET CORE前后端交互之AJAX（含基础Demo）
目录 一、后端 二、前端 三、代码位置 四、实现效果 五、关键的点 1.后端传输给前端： 2.前端传输给后端 一、后端 using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc.RazorPages; using Microsoft.AspNetCore.Mvc.Rendering; using WebAppl…...
经典神经网络(14)T5模型原理详解及其微调(文本摘要)
经典神经网络(14)T5模型原理详解及其微调(文本摘要) 2018 年，谷歌发布基于双向 Transformer 的大规模预训练语言模型 BERT，而后一系列基于 BERT 的研究工作如春笋般涌现，预训练模型也成为了业内解决 NLP 问题的标配。 2019年，谷歌…...
C语言结构体字节对齐技术详解
C语言结构体字节对齐技术详解（第一部分） 在C语言中，结构体字节对齐是一个重要的概念，它涉及到内存中数据的布局和访问效率。字节对齐可以帮助提高程序的性能，减少内存碎片，并确保数据的一致性和正确性。本…...
阜阳微商城网站建设/114外链
1 .制作u盘启动盘2 .更改BIOS设置开机按ENTER F1 进入BIOS1. 修改secure boot为Disable；2.在Boot或者Startup下将UEFI/Legacy Boot由UEFI Only改为Both； Legacy First --> UEFI First3.将Boot顺序中的第一个启动项改为USB HDD启动；4.修改U…...
用wordpress做的网站有哪些/百度账号快速注册
python爬虫可以用来做什么？1、收集数据python爬虫程序可用于收集数据。这也是最直接和最常用的方法。由于爬虫程序是一个程序，程序运行得非常快，不会因为重复的事情而感到疲倦，因此使用爬虫程序获取大量数据变得非常简单和快速。由…...
建设银行官方网站诚聘英才频道/百度关键词排名优化
第2章 Java应用程序介绍2.1 作业检查单2.2 实验前任务2.3 实验练习2.4 实验后任务第3章 Java applet 介绍3.1 作业检查单3.2 实验前任务3.3 实验练习3.4 实验后任务第4章 控制结构(一)4.1 作业检查单4.2 实验前任务4.3 实验练习4.4 实验后任务第2章 Java应用程序介绍2.1 作业检…...
做电子商务网站/免费推广的网站有哪些
按照功能分为： 用户表费用表投诉建议表第一步创建数据库： CREATE DATABASE yellowstar; 用户表 创建用户表 表名：yw_users CREATE TABLE IF NOT EXISTS yw_users (uid INT UNSIGNED NOT NULL AUTO_INCREMENT KEY COMMENT UID,username VARCHA…...
政府网站开发维护合同/广告外链平台
var val Regex.Replace(text, "^( | )(?<value>.*)", "${value}", RegexOptions.Singleline | RegexOptions.IgnoreCase);转载于:https://www.cnblogs.com/sczmzx/p/7826747.html...
衡水网站开发/网络营销的几种模式
文章目录1. 按2. 元素表示说明3. 举例3.1. 简单例子3.2. 复杂例子3.3. 复杂项目的拆分表示法1. 按 E-R图提供了表示实体型、属性和联系的方法。注意：由于E-R图的图形元素并没有标准化，不同教材和不同的构建E-R图的工具软件都会有一些差异。 2. 元素表示…...