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

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

news 2026/3/29 17:09:08

源码介绍

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

GJK碰撞检测算法：从原理到实战的5个核心技巧

GJK碰撞检测算法&#xff1a;从原理到实战的5个核心技巧 【免费下载链接】gjk.c Gilbert-Johnson-Keerthi (GJK) collision detection algorithm in 200 lines of clean plain C 项目地址: https://gitcode.com/gh_mirrors/gj/gjk.c GJK碰撞检测算法是游戏开发和物理引擎…...

编程新知 2026/3/29 16:52:29

搞懂 SAP Fiori 中的 RFC 连接：把后端系统、系统别名与 Launchpad 运行链路一次讲透

在很多 SAP Fiori 项目里，团队把注意力都放在 SAPUI5、OData、Fiori Elements、语义对象导航这些能力上，却常常在集成经典应用时踩坑。真正到了项目上线阶段，用户不会关心应用是 SAPUI5、Web Dynpro ABAP，还是 SAP GUI for HTML 实现的，他们只会问一句：为什么在 SAP Fior…...

编程新知 2026/3/29 16:26:24

C++ 异常安全的最佳策略

C 异常安全的最佳策略 在C开发中&#xff0c;异常安全是确保程序在抛出异常时仍能保持正确性和资源管理的关键。异常处理不当可能导致内存泄漏、数据不一致或资源未释放等问题。本文将探讨C异常安全的最佳策略&#xff0c;帮助开发者编写更健壮的代码。 资源管理&#xff1a;…...

编程新知 2026/3/29 16:22:23

突破性Unity游戏插件框架实战指南：BepInEx从零到精通的完全手册

突破性Unity游戏插件框架实战指南&#xff1a;BepInEx从零到精通的完全手册 【免费下载链接】BepInEx Unity / XNA game patcher and plugin framework 项目地址: https://gitcode.com/GitHub_Trending/be/BepInEx BepInEx是一款专为Unity游戏设计的革命性插件框架&…...

编程新知 2026/3/29 15:46:05

Aurix TC275实战：手把手教你配置.lsl链接文件，搞定多核Trap向量表

Aurix TC275多核开发实战&#xff1a;深度解析.lsl链接文件与Trap向量表配置 在Aurix TC275多核MCU开发中&#xff0c;.lsl链接文件的配置往往是工程师面临的最大挑战之一。不同于传统单核MCU的简单内存布局&#xff0c;多核系统需要精确控制每个核心的代码和数据位置&#xff…...

编程新知 2026/3/29 14:23:30

通达信缠论画线主图实战：手把手教你5分钟搞定中枢识别与趋势线绘制

通达信缠论画线实战指南&#xff1a;5分钟掌握中枢识别与趋势线绘制技巧 在股票技术分析领域&#xff0c;缠论因其独特的结构思维和实战价值备受投资者青睐。而通达信作为国内主流证券分析软件&#xff0c;其内置的画线工具与缠论理论结合&#xff0c;能够帮助投资者快速识别关…...

编程新知 2026/3/29 12:06:02

数据库索引优化与慢查询排查实战：1000名工人工单工单系统性能攻坚

数据库索引优化与慢查询排查实战&#xff1a;千人施工队工单系统性能攻坚场景&#xff1a;某建筑集团大型商业综合体项目 规模&#xff1a;1000名工人&#xff0c;日均生成3000工单&#xff0c;工单表累计800万记录 痛点&#xff1a;早班派工高峰期系统卡顿&#xff0c;工单查询…...

编程新知 2026/3/29 11:35:24

终极指南：3步在3DS上原生运行GBA游戏，告别模拟器延迟！

终极指南&#xff1a;3步在3DS上原生运行GBA游戏&#xff0c;告别模拟器延迟&#xff01; 【免费下载链接】open_agb_firm open_agb_firm is a bare metal app for running GBA homebrew/games using the 3DS builtin GBA hardware. 项目地址: https://gitcode.com/gh_mirror…...

编程新知 2026/3/29 11:17:17

开源网页监控工具changedetection.io：实时追踪网页变化的全方位解决方案

开源网页监控工具changedetection.io&#xff1a;实时追踪网页变化的全方位解决方案 【免费下载链接】changedetection.io The best and simplest free open source website change detection, website watcher, restock monitor and notification service. Restock Monitor, c…...

编程新知 2026/3/29 10:45:00

终极指南：用WinDiskWriter在Mac上制作Windows启动盘，简单三步搞定

终极指南&#xff1a;用WinDiskWriter在Mac上制作Windows启动盘&#xff0c;简单三步搞定 【免费下载链接】windiskwriter &#x1f5a5; A macOS app that creates bootable USB drives for Windows. &#x1f6e0; Patches Windows 11 to bypass TPM and Secure Boot require…...

编程新知 2026/3/29 10:28:50