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

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

news 2025/7/14 12:37:33

源码介绍

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源码&#xff0c;源码由HTMLCSSJS组成&#xff0c;记事本打开源码文件可以进行内容文字之类的修改&#xff0c;双击html文件可以本地运行效果 效果预览 源码如下 <!doctype html> <html> <head> <meta charse…...

编程日记 2025/1/26 9:17:28

序列标注：从传统到现代，NLP中的标签预测技术全解析

引言 序列标注任务是自然语言处理&#xff08;NLP&#xff09;中的核心任务之一&#xff0c;广泛应用于信息抽取、文本分类、机器翻译等领域。随着深度学习技术的快速发展&#xff0c;序列标注任务的性能得到了显著提升。本文将从基础概念入手&#xff0c;逐步深入探讨序列标注…...

编程日记 2025/1/26 9:15:27

软件测试 —— 性能测试（jmeter）

软件测试 —— 性能测试&#xff08;jmeter&#xff09; 什么是jmeter安装jmeterjmeter常用组件线程组取样器结果树 我们之前学习了接口测试工具Postman&#xff0c;我们今天要学习的是性能测试工具——jmeter 什么是jmeter Apache JMeter 是一个开源的性能测试工具&#xff…...

编程日记 2025/1/26 9:05:12

python介绍ransac算法拟合圆

python介绍ransac算法拟合圆 RANSAC为Random Sample Consensus随机样本一致算法的缩写&#xff0c;它是根据一组包含异常数据的样本数据集&#xff0c;计算出数据的数学模型参数&#xff0c;得到有效样本数据的算法。它于1981年由Fischler和Bolles最先提出。 RANSAC算法经常用…...

编程日记 2025/1/26 9:02:09

WPS计算机二级•表格保护与打印

听说这里是目录哦 锁定单元格&#xff08;保护&#xff09;&#x1fabc;工作表被保护时 设置允许他人编辑&#x1fab8;使用密码可编辑不使用密码可编辑 表格页面布局 调整与设置&#xff08;打印前&#xff09;&#x1f984;设置页面打印区域&#x1f9a9;表格打印固定 标题和…...

编程日记 2025/1/26 9:00:04

Vue组件开发-使用xlsx库导出Excel文件

在Vue.js项目中导出Excel文件&#xff0c;使用第三方库xlsx来简化这个过程。它提供了强大的功能来处理Excel文件。 示例&#xff0c;展示如何在Vue.js项目中导出Excel文件。 1. 安装依赖 首先&#xff0c;需要安装 xlsx 和 file-saver 这两个库。xlsx 用于生成Excel文件&…...

编程日记 2025/1/26 8:58:33

使用 Pipeline 提高 Redis 批量操作性能

使用 Pipeline 提高 Redis 批量操作性能 在 Redis 中&#xff0c;Pipeline&#xff08;管道&#xff09; 是一种用于提高批量操作性能的技术。它允许客户端一次性发送多个命令到 Redis 服务器&#xff0c;而不需要等待每个命令的单独响应&#xff0c;从而减少了**网络往返&…...

编程日记 2025/1/26 8:57:26

「 机器人 」利用冲程对称性调节实现仿生飞行器姿态与方向控制

前言 在仿生扑翼飞行器中，通过改变冲程对称性这一技术手段，可以在上冲与下冲两个阶段引入不对称性，进而产生额外的力或力矩，用于实现俯仰或其他姿态方向的控制。以下从原理、在仿生飞行器中的应用和典型实验示例等方面进行梳理与阐述。 1. 冲程对称性原理 1.1 概念：上冲与…...

编程日记 2025/1/26 8:55:21

第十五届蓝桥杯大赛软件赛省赛C/C++ 大学 B 组

第十五届的题目在规定时间内做出了前5道&#xff0c;还有2道找时间再磨一磨。现在把做的一些思路总结如下&#xff1a; 题1&#xff1a;握手问题 问题描述 小蓝组织了一场算法交流会议&#xff0c;总共有 50人参加了本次会议。在会议上&#xff0c;大家进行了握手交流。按照惯例…...

编程日记 2025/1/26 8:52:14

本地大模型编程实战(02)语义检索(1)

文章目录 准备加载文档分割文档嵌入矢量存储查询矢量库检索返回评分先嵌入查询文本再检索 检索器总结代码 我们在百度、必应、谷歌等搜索引擎中使用的检索都是基于字符串的&#xff1a;用户输入字符串后&#xff0c;搜索引擎先对搜索内容进行分词&#xff0c;然后在已经进行了倒…...

编程日记 2025/1/26 8:49:12

自定义命令执行器：C++中命令封装的深度探索（C/C++实现）

在现代软件开发中&#xff0c;执行系统命令是一项常见的需求&#xff0c;无论是自动化脚本、系统管理工具&#xff0c;还是需要调用外部程序的复杂应用程序&#xff0c;都离不开对系统命令的调用。然而&#xff0c;直接使用系统调用&#xff08;如 execve&#xff09;虽然简单&…...

编程日记 2025/1/26 8:47:10

C语言程序设计十大排序—选择排序

文章目录 1.概念✅2.选择排序&#x1f388;3.代码实现✅3.1 直接写✨3.2 函数✨ 4.总结✅5.十大排序 1.概念✅ 排序是数据处理的基本操作之一&#xff0c;每次算法竞赛都很多题目用到排序。排序算法是计算机科学中基础且常用的算法&#xff0c;排序后的数据更易于处理和查找。在…...

编程日记 2025/1/26 8:44:06

C语言初阶牛客网刷题——HJ73 计算日期到天数转换【难度：简单】

1. 题目描述——HJ73 计算日期到天数转换 牛客网OJ题链接 描述 每一年中都有 12 个月份。其中&#xff0c;1,3,5,7,8,10,12 月每个月有 31 天&#xff1b; 4,6,9,11 月每个月有 30 天&#xff1b;而对于 2 月&#xff0c;闰年时有29 天&#xff0c;平年时有 28 天。 现在&am…...

编程日记 2025/1/26 8:39:01

MATLAB中alphanumericsPattern函数用法

目录 语法 说明 示例 从文本中提取字母和数字 匹配所设置数目的字母和数字 匹配不同大小的字母和数字集合 alphanumericsPattern函数的功能是匹配字母和数字字符。 语法 pat alphanumericsPattern pat alphanumericsPattern(N) pat alphanumericsPattern(minCharact…...

编程日记 2025/1/26 8:32:55

人工智能在教育领域的创新应用与前景展望

人工智能在教育领域的创新应用与前景展望 摘要&#xff1a;本文围绕人工智能在教育领域的应用展开深入探讨&#xff0c;分析了人工智能为教育带来的创新变革&#xff0c;如个性化学习支持、智能教学辅助、教育资源优化等方面的显著成效&#xff0c;同时探讨了其在应用过程中面…...

编程日记 2025/1/26 8:31:53

约束布局 ConstraintLayout

鸿蒙操作系统&#xff08;HarmonyOS&#xff09;是华为公司自主研发的面向全场景的分布式操作系统&#xff0c;旨在为用户提供流畅、安全、可靠的智能生活体验。随着鸿蒙操作系统的不断发展和完善&#xff0c;越来越多的开发者开始关注并投入到鸿蒙应用开发中来。对于想要深入理…...

编程日记 2025/1/26 8:29:50

校园商铺管理系统设计与实现(代码+数据库+LW)

摘 要 信息数据从传统到当代&#xff0c;是一直在变革当中&#xff0c;突如其来的互联网让传统的信息管理看到了革命性的曙光&#xff0c;因为传统信息管理从时效性&#xff0c;还是安全性&#xff0c;还是可操作性等各个方面来讲&#xff0c;遇到了互联网时代才发现能补上自…...

编程日记 2025/1/26 8:28:49

react native在windows环境搭建并使用脚手架新建工程

截止到2024-1-11&#xff0c;使用的主要软件的版本如下&#xff1a; 软件实体版本react-native0.77.0react18.3.1react-native-community/cli15.0.1Android Studio2022.3.1 Patch3Android SDKAndroid SDK Platform 34 35Android SDKAndroid SDK Tools 34 35Android SDKIntel x…...

编程日记 2025/1/26 8:26:47

vulnhub DC-1靶机 walkthrough

描述 DC-1 是专门为获得渗透测试经验而建造的易受攻击实验室。 它旨在成为初学者的挑战&#xff0c;但其难易程度取决于您的技能和知识以及学习能力。 要成功完成此挑战&#xff0c;您需要具备 Linux 技能、熟悉 Linux 命令行以及使用基本渗透测试工具的经验&#xff0c;例如 …...

编程日记 2025/1/26 8:25:46

计算机网络 （58）无线局域网WLAN

前言 无线局域网WLAN&#xff08;Wireless Local Area Network&#xff09;是一种利用无线通信技术将计算机设备互联起来&#xff0c;构成可以互相通信和实现资源共享的网络体系。 一、定义与特点 定义&#xff1a; WLAN通过无线信道代替有线传输介质连接两个或多个设备形成一个…...

编程日记 2025/1/26 8:22:43

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

编程新知 2025/6/18 13:47:59

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

编程新知 2025/7/13 19:29:59

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作（核心）三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

编程新知 2025/6/20 11:09:49

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2025/7/14 5:28:06

return this；返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

编程新知 2025/7/6 12:42:16

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径&#xff0c;但是vite中默认不可以。 如何实现&#xff1a; vite中提供了resolve.alias&#xff1a;通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...

编程新知 2025/7/9 18:52:53

渗透实战PortSwigger靶场：lab13存储型DOM XSS详解

进来是需要留言的&#xff0c;先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码&#xff0c;输入的<>当成字符串处理回显到页面中&#xff0c;看来只是把用户输…...

编程新知 2025/7/12 7:43:35

Java详解LeetCode 热题 100(26):LeetCode 142. 环形链表 II（Linked List Cycle II）详解

文章目录 1. 题目描述1.1 链表节点定义 2. 理解题目2.1 问题可视化2.2 核心挑战 3. 解法一&#xff1a;HashSet 标记访问法3.1 算法思路3.2 Java代码实现3.3 详细执行过程演示3.4 执行结果示例3.5 复杂度分析3.6 优缺点分析 4. 解法二&#xff1a;Floyd 快慢指针法&#xff08;…...

编程新知 2025/7/5 8:45:56

AD学习（3）

1 PCB封装元素组成及简单的PCB封装创建 封装的组成部分&#xff1a; &#xff08;1&#xff09;PCB焊盘&#xff1a;表层的铜 &#xff0c;top层的铜 &#xff08;2&#xff09;管脚序号&#xff1a;用来关联原理图中的管脚的序号&#xff0c;原理图的序号需要和PCB封装一一…...

编程新知 2025/7/13 10:28:16

WEB3全栈开发——面试专业技能点P4数据库

一、mysql2 原生驱动及其连接机制 概念介绍 mysql2 是 Node.js 环境中广泛使用的 MySQL 客户端库&#xff0c;基于 mysql 库改进而来&#xff0c;具有更好的性能、Promise 支持、流式查询、二进制数据处理能力等。 主要特点&#xff1a; 支持 Promise / async-await&#xf…...

编程新知 2025/7/13 18:36:12