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

css3 svg制作404页面动画效果HTML源码

article 2026/5/14 5:42:35

源码介绍

css3 svg制作404页面动画效果HTML源码，源码由HTML+CSS+JS组成，记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果

效果预览

在这里插入图片描述

源码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>svg 404页面</title><style>
body, html{margin: 0 auto;padding: 0;font-weight: 800;
}body{background: #000;font-family: cursive;
}svg {display: block;font: 10.5em 'Monoton';width: 960px;height: 300px;margin: 0 auto;
}.content{text-align: center;
}h1{text-align: center;font: 2em 'Roboto', sans-serif;font-weight: 900;color: #2f8f7f;opacity: .6;
}a{display: inline-block;text-transform: uppercase;font: 1em 'Roboto';font-weight: 300;border: 1px solid #2f8f7f;border-radius: 4px;color: #2f8f7f;margin-top: 10%;padding: 8px 14px;text-decoration: none;opacity: .6;
}.text {fill: none;stroke: white;stroke-dasharray: 8% 29%;stroke-width: 5px;stroke-dashoffset: 1%;animation: stroke-offset 5.5s infinite linear;
}.text:nth-child(1){stroke: #1c234d;animation-delay: -1;
}.text:nth-child(2){stroke: #315b2c;animation-delay: -2s;
}.text:nth-child(3){stroke: #2f8f7f;animation-delay: -3s;
}.text:nth-child(4){stroke: #2f8f7f;animation-delay: -4s;
}.text:nth-child(5){stroke: #da2717;animation-delay: -5s;
}@keyframes stroke-offset{100% {stroke-dashoffset: -35%;}
}
</style>
</head>
<body><link href="https://fonts.googleapis.com/css?family=Monoton" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"><svg viewBox="0 0 960 300"><symbol id="s-text"><text text-anchor="middle" x="50%" y="80%">404</text></symbol><g class = "g-ants"><use xlink:href="#s-text" class="text"></use><use xlink:href="#s-text" class="text"></use><use xlink:href="#s-text" class="text"></use><use xlink:href="#s-text" class="text"></use><use xlink:href="#s-text" class="text"></use></g>
</svg>
<div class="content"><h1>页面未找到</h1><a href="&#x0068;&#x0074;&#x0074;&#x0070;&#x0073;&#x003a;&#x002f;&#x002f;&#x0077;&#x0077;&#x0077;&#x002e;&#x0071;&#x0071;&#x006d;&#x0075;&#x002e;&#x0063;&#x006f;&#x006d;">返回首页</a>
</div></body>
</html>

css3 svg制作404页面动画效果HTML源码

源码介绍 css3 svg制作404页面动画效果HTML源码，源码由HTMLCSSJS组成，记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果效果预览源码如下 <!doctype html> <html> <head> <meta charse…...

编程日记 2026/5/11 6:18:55

LINUX 平台最快子网路由转发，内核使能选项配置

阅读本文之间，可线性参考以下文献。 Linux 命令行配置为单臂旁路由。_linux单臂路由-CSDN博客 Linux 软路由命令行配置（参考）_linux软路由-CSDN博客 VGW在 Windows 平台上局域网就绪的旁路由器程序_windows旁路由-CSDN博客本文介绍 LINUX…...

编程日记 2026/5/14 0:19:08

「机器人」扑翼飞行器混合控制策略缺点浅谈

前言将基于模型的控制与强化学习策略融合在扑翼飞行器中，虽然能够兼顾系统稳定性与极限机动能力，但也面临了更高的系统复杂性、对硬件算力与可靠性的额外要求，以及难以回避的能量效率等方面挑战。以下从四个方面进行归纳与分析。 1. 系统复杂性增加 1.1 两种控制方法的并存…...

编程日记 2026/3/5 0:43:25

本文为为🔗365天深度学习训练营内部文章原作者：K同学啊一导入数据 import torch.nn as nn import torch.nn.functional as F import torchvision,torch from sklearn.preprocessing import StandardScaler from torch.utils.data import TensorDatase…...

编程日记 2026/5/11 12:29:04

HackTheBox靶机：Sightless；NodeJS模板注入漏洞，盲XSS跨站脚本攻击漏洞实战

HackTheBox靶机：Sightless 渗透过程1. 信息收集常规探测深入分析 2. 漏洞利用（CVE-2022-0944）3. 从Docker中提权4. 信息收集（michael用户）5. 漏洞利用 Froxlor6. 解密Keepass文件漏洞分析SQLPad CVE-2022-0944 靶机介…...

编程日记 2026/5/14 0:19:11

docker安装elk6.7.1-搜集java日志

docker安装elk6.7.1-搜集java日志如果对运维课程感兴趣，可以在b站上、A站或csdn上搜索我的账号： 运维实战课程，可以关注我，学习更多免费的运维实战技术视频 0.规划 192.168.171.130 tomcat日志filebeat 192.168.171.131 …...

编程日记 2026/5/11 8:56:13

XML实体注入漏洞攻与防

JAVA中的XXE攻防回显型无回显型 cve-2014-3574...

编程日记 2026/5/11 1:31:16

Flutter 与 React 前端框架对比：深入分析与实战示例

Flutter 与 React 前端框架对比：深入分析与实战示例在现代前端开发中，Flutter 和 React 是两个非常流行的框架。Flutter 是 Google 推出的跨平台开发框架，支持从一个代码库生成 iOS、Android、Web 和桌面应用；React 则是 Facebo…...

编程日记 2025/12/9 20:30:59

使用 Docker Compose 一键启动 Redis、MySQL 和 RabbitMQ

目录一、Docker Compose 简介二、服务配置详解 1. Redis 配置 2. MySQL 配置 3. RabbitMQ 配置三、数据持久化与时间同步四、部署与管理五、总结目录挂载与卷映射的区别现代软件开发中，微服务架构因其灵活性和可扩展性而备受青睐。为了支持微服务的…...

编程日记 2026/5/13 5:55:28

【问题解决】el-upload数据上传成功后不显示成功icon

el-upload数据上传成功后不显示成功icon 原因由于后端返回数据与要求形式不符，使用el-upload默认方法调用onSuccess钩子失败，上传文件的状态并未发生改变，因此数据上传成功后并未显示成功的icon标志。解决方法点击按钮，调用…...

编程日记 2026/5/10 9:09:03

spring框架之IoC学习与梳理(1)

目录一、spring-IoC的基本解释。二、spring-IoC的简单demo（案例）。 （1）maven-repository官网中找依赖坐标。 （2）.pom文件中通过标签引入。 （3）使用lombok帮助快速开发。 &#xff…...

编程日记 2026/5/13 7:40:52

MQ的可靠消息投递机制

确保消息在发送、传递和消费过程中不会丢失、重复消费或错乱。 1. 消息的可靠投递消息持久化： 消息被发送到队列后会存储在磁盘上，即使消息队列崩溃，消息也不会丢失。例如：Kafka、RabbitMQ等都支持持久化消息。Kafka通过将消息存…...

编程日记 2026/5/5 20:52:15

Mono里运行C#脚本35—加载C#语言基类的过程

前面大体地分析了整个Mono运行过程，主要从文件的加载，再到EXE文件的入口点，然后到方法的编译，机器代码的生成，再到函数调用的跳板转换，进而解析递归地实现JIT。但是还有很多功能没有解析的，就是C#语言相关最多的，就是类的加载，以及类语言设计的实现属性，比如类的…...

编程日记 2026/3/30 7:03:22

location+rewrite实现隐性域名配置

隐性域名：访问www.a.com 则跳转到www.b.com的页面，但是地址栏还是显示www.a.com 1、配置基于根目录的隐性域名（就是nginx反向代理） 访问http://www.bbb.org:8002， 跳转http://www.accp.org:8001的页面，地址…...

编程日记 2026/4/17 23:42:37

150 Linux 网络编程6 ，从socket 到 epoll整理。listen函数参数再研究

一 . 只能被一个client 链接 socket例子此例子用于socket 例子， 该例子只能用于一个客户端连接server。不能用于多个client 连接 server socket_server_support_one_clientconnect.c /* 此例子用于socket 例子， 该例子只能用于一个客户端连接server。…...

编程日记 2026/5/13 11:50:20

centos7 配置国内镜像源安装 docker

使用国内镜像源：由于 Docker 的官方源在国内访问可能不稳定，你可以使用国内的镜像源，如阿里云的镜像源。手动创建 /etc/yum.repos.d/docker-ce.repo 文件，并添加以下内容： [docker-ce-stable] nameDocker CE Stable -…...

编程日记 2025/12/11 6:02:43

周末总结(2024/01/25)

工作人际关系核心实践： 要学会随时回应别人的善意，执行时间控制在5分钟以内坚持每天早会打招呼遇到接不住的话题时拉低自己，抬高别人(无阴阳气息) 朋友圈点赞控制在5min以内，职场社交不要放在5min以外职场的人际关系在面对利…...

编程日记 2025/12/17 6:53:27

【go语言】map 和 list

一、map map 是一种无序的键值对的集合。无序 ：map[key]键值对：key - value map 最重要的一点是通过 key 来快速检索数据，key 类似于索引，指向数据的值。map 是一种集合，所以我们可以像迭代数组和切片那样迭代他。…...

编程日记 2026/2/11 15:32:59

PCIe 个人理解专栏——【2】LTSSM（Link Training and Status State Machine）

前言： 链路训练和状况状态机LTSSM（Link Training and Status State Machine）是整个链路训练和运行中状态的状态转换逻辑关系图，总共有11个状态。正文： 包括检测（Detect），轮询&…...

编程日记 2026/5/12 18:09:51

《DiffIR：用于图像修复的高效扩散模型》学习笔记

paper：2303.09472 GitHub：GitHub - Zj-BinXia/DiffIR: This project is the official implementation of Diffir: Efficient diffusion model for image restoration, ICCV2023 目录摘要 1、介绍 2、相关工作 2.1 图像恢复（Image Rest…...

编程日记 2026/5/1 11:20:22

Vue3 30天精进之旅：Day01 - 初识Vue.js的奇妙世界

引言在前端开发领域，Vue.js是一款极具人气的JavaScript框架。它以其简单易用、灵活高效的特性，吸引了大量开发者。本文是“Vue 3之30天系列学习”的第一篇博客，旨在帮助大家快速了解Vue.js的基本概念和核心特性，为后续的深入学习…...

编程日记 2026/5/14 2:57:14

[笔记] 极狐GitLab实例 : 手动备份步骤总结

官方备份文档 : 备份和恢复极狐GitLab 一. 要求为了能够进行备份和恢复，请确保您系统已安装 Rsync。如果您安装了极狐GitLab： 如果您使用 Omnibus 软件包，则无需额外操作。如果您使用源代码安装，您需要确定是否安装了 rsync。…...

编程日记 2026/5/12 13:01:10

将本地项目上传到 GitLab/GitHub

以下是将本地项目上传到 GitLab 的完整步骤，从创建仓库到推送代码的详细流程： 1. 在 GitLab 上创建新项目登录 GitLab，点击 New project。选择 Create blank project。填写项目信息： Project name: 项目名称（如 my-p…...

编程日记 2025/11/20 21:23:29

switch组件的功能与用法

文章目录 1 概念介绍2 使用方法3 示例代码我们在上一章回中介绍了PageView这个Widget,本章回中将介绍Switch Widget.闲话休提，让我们一起Talk Flutter吧。 1 概念介绍我们在这里介绍的Switch是指左右滑动的开关，常用来表示某项设置是打开还是关闭。Fl…...

编程日记 2026/5/13 14:02:38