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

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

news 来源：原创 2025/5/22 9:50:34

源码介绍

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…...

编程日记 2025/5/22 9:50:34

MATLAB提供的颜色映射表colormap——伪彩色

图像处理领域的一个习惯：不是真实的颜色，一般用伪彩色。一是说明不是物体本身的颜色，二是彩色更容易分辨。 MATLAB陆续提供了16种颜色映射表colormap。之前的都很丑，近5年新增的4种还可以。总的说来还是丑。这是一种鸟的名字。…...

编程日记 2025/5/18 9:18:26

2013年蓝桥杯第四届CC++大学B组真题及代码

目录 1A：高斯日记（日期计算） 2B：马虎的算式（暴力模拟） 3C：第39级台阶（dfs或dp） 4D：黄金连分数（递推大数运算） 5E：前缀…...

编程日记 2025/5/20 4:24:34

我的创作纪念日——1/23

机缘想起写博客，其实是当时看鹏哥C语言时，他说通过写博客的方式来记录自己学习过程，有利于提升自己。尽管我只看了几集就没怎么看，但是写博客的习惯保留下来。至于为什么，一方面单纯当作单个代码库，把自…...

编程日记 2025/5/21 23:34:16

C# Interlocked 类使用详解

总目录前言在多线程编程中，确保多个线程对共享资源的安全访问是一个关键挑战。C# 提供了多种同步机制来处理并发问题，其中 System.Threading.Interlocked 类提供了一种轻量级的方法来进行原子操作。它允许您执行一些常见的增量、减量、交换等操作&…...

编程日记 2025/5/20 5:57:29

SYN Flooding的攻击原理

SYN Flooding是一种常见的网络攻击方式，属于拒绝服务攻击（DoS）的一种，其攻击原理主要是利用了TCP协议的三次握手过程，以下是具体介绍： TCP三次握手正常流程第一次握手：客户端向服务器发送一个…...

编程日记 2025/5/19 3:16:04

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

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

编程日记 2025/5/19 16:01:56

类包含类三角分形面向对象

Cad c# Sj类的构造函数，直接包含电线和三个分形三角形。...

编程日记 2025/5/16 2:56:04

view 使用内置的Chip简化布局 import package:chenyanzhenxuan/common/index.dart; import package:ducafe_ui_core/ducafe_ui_core.dart; import package:flutter/material.dart; import package:get/get.dart; import package:tdesign_flutter/tdesign_flutter.dart;import i…...

编程日记 2025/5/18 8:43:13

chrome插件：网页图片高清下载

前置条件： 安装有chrome谷歌浏览器的电脑使用步骤： 1.打开chrome扩展插件 2.点击管理扩展程序 3.加载已解压的扩展程序 4.选择对应文件夹 5.成功后会出现一个扩展小程序 6.点击对应小程序 7.输入需要访问的网址，点击扩展插件即可进行图片…...

编程日记 2025/5/22 8:56:51

docker 简要笔记

文章目录一、前提内容1、docker 环境准备2、docker-compose 环境准备3、流程说明二、打包 docker 镜像1、基础镜像2、国内镜像源3、基础的dockerfile4、打包镜像四、构建运行1、docker 部分2、docker-compose 部分2.1、构建docker-compose.yml2.1.1、同目录构建2.1.2、利用镜…...

编程日记 2025/5/22 8:55:00

Java I/O 流介绍

Java学习资料 Java学习资料 Java学习资料一、引言在 Java 编程中，I/O（Input/Output）流是处理输入和输出操作的核心机制。它允许程序与外部设备（如文件、网络连接、键盘、显示器等）进行数据交互。通过使用 I/O 流&…...

编程日记 2025/5/22 9:29:26

C# OpenCV机器视觉:利用CNN实现快速模板匹配

在一个阳光灿烂的周末，阿强正瘫在沙发上，百无聊赖地换着电视频道。突然，一则新闻吸引了他的注意：某博物馆里一幅珍贵的古画离奇失踪，警方怀疑是被一伙狡猾的盗贼偷走了，现场只留下一些模糊不清的监控画面&a…...

编程日记 2025/5/21 19:29:42

数据结构——实验七·排序

欢迎各位大佬们来到Tubishu的博客🌟 Tubishu是一名计算机本科生，不定期发送一些在学校的成果供佬们消遣~希望能为佬的编程之路添砖加瓦⭐🔥 求各位大佬们垂怜🔥点赞评论一下呗🔥🔥 本文专栏 ➡️ 数据结构 …...

编程日记 2025/5/22 8:49:41

Flutter_学习记录_Tab的简单Demo~真的很简单

1. Tab的简单使用了解要实现tab(选项卡或者标签视图)需要用到三个组件： TabBarTabBarViewTabController 这一块，我也不知道怎么整理了，直接提供代码吧： import package:flutter/material.dart;void main() {runApp(MyApp());…...

编程日记 2025/5/17 1:15:23

const的用法

文章目录一、C和C中const修饰变量的区别二、const和一级指针的结合const修饰的量常出现的错误是:const和一级指针的结合总结：const和指针的类型转换公式三、const和二级指针的结合一、C和C中const修饰变量的区别 C中：const必须初始化，叫常…...

编程日记 2025/5/21 17:09:00

分布式微服务系统简述

distributed microservice 分布式与微服务的定义及关系；分布式微服务架构里的各组件，如：配置中心、服务注册/发现、服务网关、负载均衡器、限流降级、断路器、服务调用、分布式事务等；spring cloud 介绍及实现案例，如…...

编程日记 2025/5/20 14:41:03

Uniapp开发总结

一、tabBar 如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。 pages.json 页面路由 | uni-app官网 pages.json基本配置： "tabBar": {"color": "#000",&quo…...

编程日记 2025/5/18 0:59:45

uniapp APP端页面触发调用webview（页面为uniapp开发的H5）里的方法

原理： 使用 getCurrentInstance() 获取当前组件的 Vue 实例，通过 instance.proxy.$scope.$getAppWebview() 获取 Uniapp 的原生 WebView 对象。使用 WebView 提供的 evalJS 方法，执行嵌入 H5 页面内的 JavaScript 代码 <template>&l…...

编程日记 2025/5/20 11:04:30

Qt 5.14.2 学习记录 —— 이십 QFile和多线程

文章目录 1、QFile1、打开2、读写3、关闭4、程序5、其它功能 2、多线程1、演示2、锁 3、条件变量和信号量 1、QFile Qt有自己的一套文件体系，不过Qt也可以使用C，C，Linux的文件操作。使用Qt的文件体系和Qt自己的一些类型更好配合。管理写入读…...

编程日记 2025/5/20 0:32:02

未初始化数据恢复全攻略

没有初始化概述在日常使用电脑、硬盘、U盘等存储设备时，我们可能会遇到“没有初始化”的提示。这一情况通常发生在存储设备突然无法被系统正常识别或访问时，系统往往要求我们先进行初始化操作。然而，初始化操作意味着对存储设备进行格式化&…...

编程日记 2025/5/21 8:34:14

自动驾驶中的多传感器时间同步

目录前言 1.多传感器时间特点 2.统一时钟源 2.1 时钟源 2.2 PPSGPRMC 2.3 PTP 2.4 全域架构时间同步方案 3.时间戳误差 3.1 硬件同步 3.2 软件同步 3.2.3 其他方式 ① ROS 中的 message_filters 包 ② 双端队列 std::deque 参考： 前言对多传感器数据…...

编程日记 2025/5/16 15:16:36

三元组抽取在实际应用中如何处理语义模糊性？

在实际应用中，三元组抽取面临语义模糊性的问题，这主要体现在输入文本的非规范描述、复杂句式以及多义性等方面。为了有效处理这种模糊性，研究者们提出了多种方法和技术，以下是一些关键策略： 基于深度学习的方法深度学…...

编程日记 2025/5/20 20:39:25

代码随想录刷题day16|（哈希表篇）349.两个数组的交集

目录一、哈希表理论基础二、集合set在哈希法中的应用三、相关算法题目四、相关知识点 1.set集合特点和常用方法 1.1 set集合概述 1.2 set集合特点 1.3 常用方法 2.set集合转换成数组法1：另新建一个数组法2：将结果集合转为数组 ▲ 3.数组…...

编程日记 2025/5/17 1:32:26

浅谈Redis

2007 年，一位程序员和朋友一起创建了一个网站。为了解决这个网站的负载问题，他自己定制了一个数据库。于2009 年开发，称之为Redis。这位意大利程序员是萨尔瓦托勒桑菲利波(Salvatore Sanfilippo)，他被称为Redis之父，更…...

编程日记 2025/5/20 7:48:43

整数的个数（信息学奥赛一本通-1067）

【题目描述】给定k(1<k<100)个正整数，其中每个数都是大于等于1，小于等于10的数。写程序计算给定的k个正整数中，1，5和10出现的次数。【输入】输入有两行：第一行包含一个正整数k，第二行包含k个正整数…...

编程日记 2025/5/21 20:00:58

macos的图标过大，这是因为有自己的设计规范

苹果官方链接：App 图标 | Apple Developer Documentation 这个在官方文档里有说明，并且提供了sketch 和 ps 的模板。 figma还提供了模板： Figma...

编程日记 2025/5/12 22:27:19

C++17 命名空间的新特性：简化与优化的典范

文章目录 1. 简化的嵌套命名空间1.1 背景与问题1.2 C17的解决方案1.3 实际应用场景1.4 注意事项 2. 声明多个名称的using声明2.1 背景与问题2.2 C17的解决方案2.3 实际应用场景2.4 注意事项 3. 属性命名空间的简化3.1 背景与问题3.2 C17的解决方案3.3 实际应用场景3.4 注意事项…...

编程日记 2025/5/22 8:11:32

使用python-docx包进行多文件word文字、字符批量替换

1、首先下载pycharm。 2、改为中文。 3、安装python-docx包。搜索包名字，安装。 4、新建py文件，写程序。 from docx import Documentdef replace1(array1):# 替换词典（标签值按实际情况修改）dic {替换词1: array1[0], 替换…...

编程日记 2025/5/19 18:35:29

模块初阶学习

当我们在过去想要实现一个功能时，例如Swap交换函数时，我们需要不断考虑参数的正确与否。如果是在c语言，我们还需要不断更改函数名字，以防止函数名重复。在c我们可以通过函数名重载解决这个问题，但还是有一些小问题&…...

编程日记 2025/5/17 16:53:58

华为 Ascend 平台 YOLOv5 目标检测推理教程

1. 背景介绍随着人工智能技术的快速发展，目标检测在智能安防、自动驾驶、工业检测等领域中扮演了重要角色。YOLOv5 是一种高效的目标检测模型，凭借其速度和精度的平衡广受欢迎。华为 Ascend 推理框架（ACL）是 Ascend CANN 软件…...

编程日记 2025/5/20 3:38:06

16.好数python解法——2024年省赛蓝桥杯真题

问题描述一个整数如果按从低位到高位的顺序,奇数位(个位、百位、万位…)上的数字是奇数,偶数位(十位、千位、十万位…)上的数字是偶数,我们就称之为“好数”。给定一个正整数N,请计算从1到N一共有多少个好数。输入格式一个整数N。输出格式一个整数代表答案。样例输入 1 …...

编程日记 2025/5/21 1:00:25

在WSL使用gnome终端

默认在windows11环境下使用WSL会打开windows终端，如果想要使用gnome终端可以进行如下操作确保 WSLg 已启用： WSLg 默认在 Windows 11 和最新版本的 WSL 2 中启用。检查 WSL 版本： wsl --list --verbose 如果未启用 WSLg，请更…...

编程日记 2025/5/19 8:15:17

评估篇| 大模型评测综述

在传统的自然语言任务下，如分类等，经常会用精确率、F1等指标，来评测模型的好坏。随着大模型技术研究的快速发展，以往的指标，对于大模型评估显得过于单薄。如何准确地评估大语言模型在不同维度的能力水平，已经成为当前研究的热点问题。为了全面考察大语言模型的有效性，研…...

编程日记 2025/5/18 11:57:23

Ubuntu下载zenodo文件Ubuntu download zenodo

一般数据集文件会比较大，直接下载单个压缩包很慢。可以使用代码多线程下载小文件。环境 Ubuntu22.04 示例代码 pip3 install zenodo_get zenodo_get https://zenodo.org/records/13715870参考 https://github.com/dvolgyes/zenodo_get...

编程日记 2025/5/19 4:34:20

OpenHarmony 5.0.2 Release来了！

版本概述 OpenHarmony 5.0.2 Release版本对标准系统的能力进行持续完善，以快速迭代的方式推出API 14，相比5.0.1 Release版本，重点做出了如下特性新增或增强： 进一步增强ArkUI、图形图像的能力，提供更多组件的高级属性…...

编程日记 2025/5/18 16:31:24

蓝桥杯3519 填充 | 分类讨论

题目传送门很简单，遍历一次字符串，将‘?’作为0或1处理，发现00和11统计次数即可。 s str(input()) cnt 0 arr [00, 11, 0?, ?0, 1?, ?1, ??] i0 while i < len(s)-1:if s[i:(i2)] in arr:i 2cnt 1else:i 1 print(cnt)END✨...

编程日记 2025/5/14 15:43:05

均值（信息学奥赛一本通-1060）

【题目描述】给出一组样本数据，包含n个浮点数，计算其均值，精确到小数点后4位。【输入】输入有两行，第一行包含一个整数n（n小于100），代表样本容量；第二行包含n个绝对值不超过1000的…...

编程日记 2025/5/19 21:11:09

Windows Docker Desktop安装及使用 Docker 运行 MySQL

Docker Desktop是Docker的官方桌面版，专为Mac和Windows用户设计，提供了一个简单易用的界面来管理和运行Docker容器。它集成了Docker引擎，为开发人员提供了一个快速、可靠、可扩展的方式来构建、运行和管理应用。DockerDesktop的优势在于&…...

编程日记 2025/5/22 2:39:23

关于使用微服务的注意要点总结

一、防止过度设计微服务的拆分一定要结合团队人员规模来考虑，笔者就曾遇到过一个公司的项目，是从外部采购回来的，微服务划分为十几个应用，我们在此项目基础上进行自行维护和扩展。由于公司业务规模不大，而且二次开发的…...

编程日记 2025/5/21 23:32:57

对于RocksDB和LSM Tree的一些理解

LSM Tree的读写过程 HBase、LevelDB，rocksDB（是一个引擎）底层的数据结构是LSM Tree适合写多读少的场景，都是追加写入内存中的MemTable，写入一条删除（或修改）标记，而不用去访问实际的…...

编程日记 2025/5/19 6:38:06

Pyecharts之特殊图表的独特展示

在数据可视化的世界里，除了常见的柱状图、折线图、饼图等，还有一些特殊的图表可以为我们带来独特的展示效果，帮助我们以更有趣、更直观的方式呈现数据。Pyecharts 为我们提供了多种特殊图表的绘制功能，本文将介绍象形图、水球图和…...

编程日记 2025/5/17 20:48:33

【Uniapp-Vue3】动态设置页面导航条的样式

1. 动态修改导航条标题 uni.setNavigationBarTitle({ title:"标题名称" }) 点击修改以后顶部导航栏的标题会从“主页”变为“动态标题” 2. 动态修改导航条颜色 uni.setNavigationBarColor({ backgroundColor:"颜色" }) 3. 动态添加导航加载动画 // 添加加…...

编程日记 2025/5/21 1:21:12

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

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

编程日记 2025/5/20 19:56:12

c语言操作符（详细讲解）

目录前言一、算术操作符一元操作符： 二元操作符： 二、赋值操作符代码例子： 三、比较操作符相等与不相等比较操作符： 大于和小于比较操作符： 大于等于和小于等于比较操作符： 四、逻辑操作符逻辑与&…...

编程日记 2025/5/19 17:18:52

神经网络|(四)概率论基础知识-古典概型

【1】引言前序学习了线性回归的基础知识，了解到最小二乘法可以做线性回归分析，但为何最小二乘法如此准确，这需要从概率论的角度给出依据。因此从本文起，需要花一段时间来回顾概率论的基础知识。【2】古典概型古典概型是我…...

编程日记 2025/5/21 21:56:32

省市区三级联动

引言在网页中，经常会遇到需要用户选择地区的场景，如注册表单、地址填写等。为了提供更好的用户体验，我们可以实现一个三级联动的地区选择器，让用户依次选择省份、城市和地区。效果展示： 只有先选择省份后才可以选择…...

编程日记 2025/5/17 22:38:15

阿里云服务器部署windows随手笔记(Vue+SpringBoot)

服务器管理创建管理实例阿里云登录 - 欢迎登录阿里云，安全稳定的云计算服务平台注意：需要开放端口： 点击实例ID/名称——安全组——安全组列表——管理规则—— 安全组详情——入方向——手动添加端口号（例如目的8080&…...

编程日记 2025/5/16 10:43:09

79，【3】BUUCTF WEB [GXYCTF2019]BabysqliV3.0

进入靶场现在做多了其他类型，老喜欢这个页面了，老朋友admin password 老规矩，桌面有啥就传啥第一次点击上传什么都不显示点了两次就有下面开头的那段话了他在最后还偷偷骂了一句确实连不上再回顾一下题目 buuctf打不开了只能看别人…...

编程日记 2025/5/21 2:52:55

【问题】Chrome安装不受支持的扩展解决方案

此扩展程序已停用，因为它已不再受支持 Chromium 建议您移除它。详细了解受支持的扩展程序此扩展程序已停用，因为它已不再受支持详情移除解决 1. 解压扩展 2.打开manifest.json 3.修改版本将 manifest_version 改为3及以上 {"manifest_ver…...

编程日记 2025/5/11 18:22:11

源码介绍

效果预览

源码如下

相关文章：