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

简约的悬浮动态特效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 文件

经常会遇到需要导出数据报表的需求&#xff0c;除了可以通过 encoding/csv 导出 CSV 以外&#xff0c;还可以使用 https://github.com/qax-os/excelize 导出 xlsx 等格式的 excel&#xff0c;下面封装了一个方法&#xff0c;支持多 sheet 的 excel 数据生成&#xff0c;导出按需…...

探索GitHub上的两个革命性开源项目

在数字世界中&#xff0c;总有一些项目能够以其创新性和实用性脱颖而出&#xff0c;吸引全球开发者的目光。今天&#xff0c;我们将深入探索GitHub上的两个令人惊叹的开源项目&#xff1a;Comic Translate和GPTPDF&#xff0c;它们不仅改变了我们处理信息的方式&#xff0c;还极…...

SpringBoot框架学习笔记(三):Lombok 和 Spring Initailizr

1 Lombok 1.1 Lombok 介绍 &#xff08;1&#xff09;Lombok 作用 简化JavaBean开发&#xff0c;可以使用Lombok的注解让代码更加简洁Java项目中&#xff0c;很多没有技术含量又必须存在的代码&#xff1a;POJO的getter/setter/toString&#xff1b;异常处理&#xff1b;I/O…...

【ASP.NET网站传值问题】“object”不包含“GetEnumerator”的公共定义,因此 foreach 语句不能作用于“object”类型的变量等

问题一&#xff1a;不允许遍历 原因&#xff1a;实体未强制转化 后端: ViewData["CateGroupList"] grouplist; 前端加上&#xff1a;var catelist ViewData["CateGroupList"] as List<Catelogue>; 这样就可以遍历catelist了 问题二&#xff1a…...

Stateflow中的状态转换表

状态转换表是表达顺序模态逻辑的另一种方式。不要在Stateflow图表中以图形方式绘制状态和转换&#xff0c;而是使用状态转换表以表格格式表示模态逻辑。 使用状态转换表的好处包括&#xff1a; 易于对类列车状态机进行建模&#xff0c;其中模态逻辑涉及从一个状态到其邻居的转换…...

结合Redis解决接口幂等性问题

结合Redis解决接口幂等性问题 引言正文收获 引言 该问题产生背景是根据需求描述&#xff0c;要求对已发布的课程能进行编辑修改&#xff0c;并且要求能进行回滚。 幂等性问题描述&#xff1a;对同一个接口并发请求产生的结果是不变的。 Get 请求以及 Delete 请求天然保证幂等…...

2024算力基础设施安全架构设计与思考(免费下载)

算网安全体系是将数据中心集群、算力枢纽、一体化大数据中心三个层级的安全需求进行工程化解耦&#xff0c;从国家安全角度统筹设计&#xff0c;通过安全 服务化方式&#xff0c;依托威胁情报和指挥协同通道将三层四级安全体系串联贯通&#xff0c;达成一体化大数据安全目标。 …...

ExoPlayer架构详解与源码分析(15)——Renderer

系列文章目录 ExoPlayer架构详解与源码分析&#xff08;1&#xff09;——前言 ExoPlayer架构详解与源码分析&#xff08;2&#xff09;——Player ExoPlayer架构详解与源码分析&#xff08;3&#xff09;——Timeline ExoPlayer架构详解与源码分析&#xff08;4&#xff09;—…...

网络安全-等级保护制度介绍

一、等保发展历程 &#xff08;1&#xff09;1994国务院147号令 第一次提出等级保护概念&#xff0c;要求对信息系统分等级进行保护 &#xff08;2&#xff09;1999年GB17859 国家强制标准发布&#xff0c;信息系统等级保护必须遵循的法规 &#xff08;3&#xff09;2005年公安…...

【介绍下大数据组件之Storm】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…...

React Hook 总结(React 萌新升级打怪中...)

1 useCallback useMemo 和 useCallback 接收的参数都是一样&#xff0c;都是在其依赖项发生变化后才执行&#xff0c;都是返回缓存的值&#xff0c;区别在于 useMemo 返回的是函数运行的结果&#xff0c;useCallback 返回的是函数。 当需要使用 useCallback 的情况通常包括以…...

Typora 1.5.8 版本安装下载教程 (轻量级 Markdown 编辑器),图文步骤详解,免费领取

文章目录 软件介绍软件下载安装步骤激活步骤 软件介绍 Typora是一款基于Markdown语法的轻量级文本编辑器&#xff0c;它的主要目标是为用户提供一个简洁、高效的写作环境。以下是Typora的一些主要特点和功能&#xff1a; 实时预览&#xff1a;Typora支持实时预览功能&#xff0…...

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解决&#xff1a; 增加 docker 虚拟磁盘大小。如下图...

单片机主控的基本电路

论文 1.复位电路 2.启动模式设置接口 3.VBAT供电接口 4.MCU 基本电路 5.参考电压选择端口...

【19】读感 - 架构整洁之道(一)

概述 《架构整洁之道》一书中有提到设计和架构的感念&#xff0c;它们究竟是什么&#xff1f;书是这么说的&#xff0c;它们的层次不一样&#xff0c;架构更“高层级”的说法&#xff0c;这类讨论一般都把“底层”的实现细节排除在外。而设计往往指代的具体的系统底层组织结构…...

多层全连接神经网络(三)---分类问题

问题介绍 机器学习中的监督学习主要分为回归问题和分类问题&#xff0c;我们之前已经讲过回归问题了&#xff0c;它希望预测的结果是连续的&#xff0c;那么分类问题所预测的结果就是离散的类别。这时输入变量可以是离散的&#xff0c;也可以是连续的&#xff0c;而监督学习从数…...

签名优化:请求数据类型不是`application/json`,将只对随机数进行签名计算,例如文件上传接口。

文章目录 I 签名进行请求数据类型类型判断1.1 常见的ContentType1.2 签名切面处理1.3 文件上传案例1.4 处理接口信息背景: 文件上传接口的请求数据类型通常为multipart/form-data,方便携带文本域和使用接口文档进行调试。 如果携带JSON数据,不方便调试接口。 前端数据也要特…...

PostgreSQL的Json数据类型如何使用

PostgreSQL中的JSON数据类型提供了一种灵活的方式来存储JSON&#xff08;JavaScript Object Notation&#xff09;数据。JSON是一种轻量级的数据交换格式&#xff0c;易于人阅读和编写&#xff0c;同时也易于机器解析和生成。在PostgreSQL中&#xff0c;你可以使用JSON和JSONB&…...

SpringData JPA Mongodb 查询部分字段

JPA 网上用的好像不多&#xff0c;找了好多材料以后最终找了这个可行的方案&#xff1a; Query(fields "{tender_id:1,_id:0}")List<MGPltTender> findByTenderIdIsNotNull(PageRequest pageRequest); 调用&#xff1a; Sort sort Sort.by(popularType.getC…...

小白友好!Gemma-3-12B-IT WebUI部署常见错误及修复方法

小白友好&#xff01;Gemma-3-12B-IT WebUI部署常见错误及修复方法 1. 为什么你的WebUI总是打不开&#xff1f; 你是不是也遇到过这种情况&#xff1a;跟着教程一步步部署Gemma-3-12B-IT的WebUI&#xff0c;最后一步打开浏览器&#xff0c;输入地址&#xff0c;结果页面一直转…...

[认知计算] 神经网络架构:从生物启发的神经元到现代激活函数演进

1. 从生物神经元到人工神经元的数学抽象 1943年&#xff0c;麦卡洛克和皮茨在论文《神经活动中内在思想的逻辑演算》中首次提出用数学模型模拟生物神经元。这个看似简单的想法&#xff0c;彻底改变了人类对智能的认知方式。生物神经元由树突、细胞体和轴突三部分组成&#xff1…...

手把手教你用YOLOv5训练自己的交通标志数据集(从LabelImg标注到模型部署)

从零构建YOLOv5交通标志检测器的实战指南 在自动驾驶和智能交通系统快速发展的今天&#xff0c;准确识别道路标志已成为计算机视觉领域的重要应用场景。不同于传统图像处理方法&#xff0c;基于深度学习的目标检测技术能够适应复杂环境变化&#xff0c;而YOLOv5以其卓越的速度-…...

Crawl4AI浏览器配置文件创建与键盘交互处理终极指南:打造个性化爬虫身份

Crawl4AI浏览器配置文件创建与键盘交互处理终极指南&#xff1a;打造个性化爬虫身份 【免费下载链接】crawl4ai &#x1f525;&#x1f577;️ Crawl4AI: Open-source LLM Friendly Web Crawler & Scrapper 项目地址: https://gitcode.com/GitHub_Trending/craw/crawl4ai…...

别再只盯着GPS了!从手机导航到无人机测绘,聊聊SPP、DGPS、RTK、PPP这几种定位技术到底该怎么选?

定位技术实战指南&#xff1a;从厘米级精度到全球覆盖的智能决策 站在一片待测绘的工地上&#xff0c;无人机工程师小王正面临一个关键抉择——该为这批新设备配置哪种定位模块&#xff1f;RTK的厘米级精度令人心动&#xff0c;但架设基准站的成本让他犹豫&#xff1b;PPP技术号…...

魔兽世界插件开发利器:wow_api技术架构与实战指南

魔兽世界插件开发利器&#xff1a;wow_api技术架构与实战指南 【免费下载链接】wow_api Documents of wow API -- 魔兽世界API资料以及宏工具 项目地址: https://gitcode.com/gh_mirrors/wo/wow_api 技术探索&#xff1a;从需求到架构的演进之路 魔兽世界插件开发生态长…...

LSTM电池SOC估计最基本方法及全包代码:包含两个数据集、预处理代码、模型代码与估计结果

LSTM做电池SOC估计&#xff0c;最基本的方法&#xff0c;入门必学&#xff0c;包括两个数据集&#xff0c;及其介绍、预处理代码、模型代码、估计结果等&#xff0c;这是我见过最全的一个SOC估计代码包&#xff0c;总共文件大概有70个左右最近在折腾电池SOC估计&#xff0c;发现…...

【Spark实战指南】RDD核心操作与数据分析实战(附完整代码)

1. RDD基础与实战环境搭建 RDD&#xff08;Resilient Distributed Dataset&#xff09;是Spark最核心的数据抽象&#xff0c;你可以把它理解成一个分布式的数据集合&#xff0c;但比普通集合更强大。想象你有一本超大的电话簿被撕成很多页&#xff0c;分给不同的人保管——RDD就…...

从零掌握ComfyUI-WanVideoWrapper:AI视频制作工具实战指南

从零掌握ComfyUI-WanVideoWrapper&#xff1a;AI视频制作工具实战指南 【免费下载链接】ComfyUI-WanVideoWrapper 项目地址: https://gitcode.com/GitHub_Trending/co/ComfyUI-WanVideoWrapper 在数字内容创作领域&#xff0c;视频生成工具正经历着前所未有的技术革新。…...

基于三相两电平逆变器的VSG并网系统:电压电流双闭环控制的仿真研究

VSG并网&#xff0c;基于三相两电平逆变器的虚拟同步机并网&#xff0c;电压电流双闭环控制 1.VSG 2.电压电流双闭环 3..提供相关参考文献 支持simulink2022以下版本&#xff0c;联系跟我说什么版本&#xff0c;我给转成你版本&#xff08;默认发2016b&#xff09;。最近在研究…...