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

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

news 文章来源：https://blog.csdn.net/huayula/article/details/145290091 2025/5/7 23:17:24

源码介绍

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

基于物联网的风机故障检测装置的设计与实现

1 系统总体设计方案 通过对风机故障检测装置的设计与实现的需求、可行性进行分析&#xff0c;本设计风机故障检测装置的设计与实现的系统总体架构设计如图2-1所示&#xff0c;系统风机故障检测装置采用STM32F103单片机作为控制器&#xff0c;并通过DS18B20温度传感器、ACS712电…...

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

【AI日记】25.01.25

【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】【读书与思考】 AI kaggle 比赛&#xff1a;Forecasting Sticker Sales 读书 书名&#xff1a;法治的细节 律己 AI&#xff1a;8 小时&#xff0c;良作息&#xff1a;00:30-8:30&#xff0c; 良短视频&…...

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

Sourcetree：一款高效便捷的Git版本控制客户端

Sourcetree&#xff1a;一款高效便捷的Git版本控制客户端 引言 在软件开发领域&#xff0c;版本控制是确保代码质量和项目进度的关键工具。Git作为当前最流行的版本控制系统&#xff0c;已经广泛应用于各类项目中。而Sourcetree作为Git的图形化界面客户端&#xff0c;凭借其易…...

编程日记 2025/1/26 8:17:38

图像处理算法研究的程序框架

目录 1 程序框架简介 2 C#图像读取、显示、保存模块 3 C动态库图像算法模块 4 C#调用C动态库 5 演示Demo 5.1 开发环境 5.2 功能介绍 5.3 下载地址 参考 1 程序框架简介 一个图像处理算法研究的常用程序逻辑框架&#xff0c;如下图所示 在该框架中&#xff0c;将图像处…...

编程日记 2025/1/26 8:16:37

GitLab配置免密登录和常用命令

SSH 免密登录 Windows免密登录 删除现有Key 访问目录&#xff1a;C:\Users\Administrator\ .ssh&#xff0c;删除公钥&#xff1a;id_rsa.pub &#xff0c;私钥&#xff1a;id_rsa 2.生成.ssh 秘钥 运行命令生成.ssh 秘钥目录&#xff08; ssh-keygen -t rsa -C xxxxxx126.…...

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

Chameleon(变色龙) 跨平台编译C文件，并一次性生成多个平台的可执行文件

地址:https://github.com/MartinxMax/Chameleon Chameleon 跨平台编译C文件&#xff0c;并一次性生成多个平台的可执行文件。可以通过编译Chameleon自带的.C文件反向Shell生成不同平台攻击载荷。 登录 & 代理设置 按照以下步骤设置 Docker 的代理&#xff1a; 创建配置目…...

编程日记 2025/1/26 8:08:48

第十四讲 JDBC数据库

1. 什么是JDBC JDBC&#xff08;Java Database Connectivity&#xff0c;Java数据库连接&#xff09;&#xff0c;它是一套用于执行SQL语句的Java API。应用程序可通过这套API连接到关系型数据库&#xff0c;并使用SQL语句来完成对数据库中数据的查询、新增、更新和删除等操作…...

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

“AI教学实训系统：打造未来教育的超级引擎

嘿&#xff0c;各位教育界的伙伴们&#xff0c;今天我要跟你们聊聊一个绝对能让你们眼前一亮的教学神器——AI教学实训系统。作为资深产品经理&#xff0c;我可是亲眼见证了这款系统如何颠覆传统教学&#xff0c;成为未来教育的超级引擎。 一、什么是AI教学实训系统&#xff1f…...

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

java读取设置pdf属性信息

pom <dependency><groupId>org.apache.pdfbox</groupId><artifactId>pdfbox</artifactId><version>2.0.24</version> </dependency>读取属性 import org.apache.pdfbox.pdmodel.PDDocument; import org.apache.pdfbox.pdmod…...

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

C语言内存管理详解

C语言不像其他高级语言那样提供自动内存管理&#xff0c;它要求程序员手动进行内存的分配和释放。在C语言中&#xff0c;动态内存的管理主要依赖于 malloc、calloc、realloc 和 free 等函数。理解这些函数的用法、内存泄漏的原因及其防止方法&#xff0c;对于编写高效、可靠的C…...

编程日记 2025/1/26 7:59:39