css3 svg制作404页面动画效果HTML源码
源码介绍
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="https://www.qqmu.com">返回首页</a>
</div></body>
</html>相关文章：
css3 svg制作404页面动画效果HTML源码
源码介绍 css3 svg制作404页面动画效果HTML源码，源码由HTMLCSSJS组成，记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果 效果预览 源码如下 <!doctype html> <html> <head> <meta charse…...
序列标注：从传统到现代，NLP中的标签预测技术全解析
引言 序列标注任务是自然语言处理（NLP）中的核心任务之一，广泛应用于信息抽取、文本分类、机器翻译等领域。随着深度学习技术的快速发展，序列标注任务的性能得到了显著提升。本文将从基础概念入手，逐步深入探讨序列标注…...
软件测试 —— 性能测试（jmeter）
软件测试 —— 性能测试（jmeter） 什么是jmeter安装jmeterjmeter常用组件线程组取样器结果树 我们之前学习了接口测试工具Postman，我们今天要学习的是性能测试工具——jmeter 什么是jmeter Apache JMeter 是一个开源的性能测试工具ÿ…...
python介绍ransac算法拟合圆
python介绍ransac算法拟合圆 RANSAC为Random Sample Consensus随机样本一致算法的缩写，它是根据一组包含异常数据的样本数据集，计算出数据的数学模型参数，得到有效样本数据的算法。它于1981年由Fischler和Bolles最先提出。 RANSAC算法经常用…...
WPS计算机二级•表格保护与打印
听说这里是目录哦 锁定单元格（保护）🪼工作表被保护时 设置允许他人编辑🪸使用密码可编辑不使用密码可编辑 表格页面布局 调整与设置（打印前）🦄设置页面打印区域🦩表格打印固定 标题和…...
Vue组件开发-使用xlsx库导出Excel文件
在Vue.js项目中导出Excel文件，使用第三方库xlsx来简化这个过程。它提供了强大的功能来处理Excel文件。 示例，展示如何在Vue.js项目中导出Excel文件。 1. 安装依赖 首先，需要安装 xlsx 和 file-saver 这两个库。xlsx 用于生成Excel文件&…...
使用 Pipeline 提高 Redis 批量操作性能
使用 Pipeline 提高 Redis 批量操作性能 在 Redis 中，Pipeline（管道） 是一种用于提高批量操作性能的技术。它允许客户端一次性发送多个命令到 Redis 服务器，而不需要等待每个命令的单独响应，从而减少了**网络往返&…...
「 机器人 」利用冲程对称性调节实现仿生飞行器姿态与方向控制
前言 在仿生扑翼飞行器中，通过改变冲程对称性这一技术手段，可以在上冲与下冲两个阶段引入不对称性，进而产生额外的力或力矩，用于实现俯仰或其他姿态方向的控制。以下从原理、在仿生飞行器中的应用和典型实验示例等方面进行梳理与阐述。 1. 冲程对称性原理 1.1 概念：上冲与…...
第十五届蓝桥杯大赛软件赛省赛C/C++ 大学 B 组
第十五届的题目在规定时间内做出了前5道，还有2道找时间再磨一磨。现在把做的一些思路总结如下： 题1：握手问题 问题描述 小蓝组织了一场算法交流会议，总共有 50人参加了本次会议。在会议上，大家进行了握手交流。按照惯例…...
语义检索(1))
本地大模型编程实战(02)语义检索(1)
文章目录 准备加载文档分割文档嵌入矢量存储查询矢量库检索返回评分先嵌入查询文本再检索 检索器总结代码 我们在百度、必应、谷歌等搜索引擎中使用的检索都是基于字符串的：用户输入字符串后，搜索引擎先对搜索内容进行分词，然后在已经进行了倒…...
自定义命令执行器：C++中命令封装的深度探索（C/C++实现）
在现代软件开发中，执行系统命令是一项常见的需求，无论是自动化脚本、系统管理工具，还是需要调用外部程序的复杂应用程序，都离不开对系统命令的调用。然而，直接使用系统调用（如 execve）虽然简单&…...
C语言程序设计十大排序—选择排序
文章目录 1.概念✅2.选择排序🎈3.代码实现✅3.1 直接写✨3.2 函数✨ 4.总结✅5.十大排序 1.概念✅ 排序是数据处理的基本操作之一，每次算法竞赛都很多题目用到排序。排序算法是计算机科学中基础且常用的算法，排序后的数据更易于处理和查找。在…...
C语言初阶牛客网刷题——HJ73 计算日期到天数转换【难度：简单】
1. 题目描述——HJ73 计算日期到天数转换 牛客网OJ题链接 描述 每一年中都有 12 个月份。其中，1,3,5,7,8,10,12 月每个月有 31 天； 4,6,9,11 月每个月有 30 天；而对于 2 月，闰年时有29 天，平年时有 28 天。 现在&am…...
MATLAB中alphanumericsPattern函数用法
目录 语法 说明 示例 从文本中提取字母和数字 匹配所设置数目的字母和数字 匹配不同大小的字母和数字集合 alphanumericsPattern函数的功能是匹配字母和数字字符。 语法 pat alphanumericsPattern pat alphanumericsPattern(N) pat alphanumericsPattern(minCharact…...
人工智能在教育领域的创新应用与前景展望
人工智能在教育领域的创新应用与前景展望 摘要：本文围绕人工智能在教育领域的应用展开深入探讨，分析了人工智能为教育带来的创新变革，如个性化学习支持、智能教学辅助、教育资源优化等方面的显著成效，同时探讨了其在应用过程中面…...
约束布局 ConstraintLayout
鸿蒙操作系统（HarmonyOS）是华为公司自主研发的面向全场景的分布式操作系统，旨在为用户提供流畅、安全、可靠的智能生活体验。随着鸿蒙操作系统的不断发展和完善，越来越多的开发者开始关注并投入到鸿蒙应用开发中来。对于想要深入理…...
校园商铺管理系统设计与实现(代码+数据库+LW)
摘 要 信息数据从传统到当代，是一直在变革当中，突如其来的互联网让传统的信息管理看到了革命性的曙光，因为传统信息管理从时效性，还是安全性，还是可操作性等各个方面来讲，遇到了互联网时代才发现能补上自…...
react native在windows环境搭建并使用脚手架新建工程
截止到2024-1-11，使用的主要软件的版本如下： 软件实体版本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…...
vulnhub DC-1靶机 walkthrough
描述 DC-1 是专门为获得渗透测试经验而建造的易受攻击实验室。 它旨在成为初学者的挑战，但其难易程度取决于您的技能和知识以及学习能力。 要成功完成此挑战，您需要具备 Linux 技能、熟悉 Linux 命令行以及使用基本渗透测试工具的经验，例如 …...
计算机网络 （58）无线局域网WLAN
前言 无线局域网WLAN（Wireless Local Area Network）是一种利用无线通信技术将计算机设备互联起来，构成可以互相通信和实现资源共享的网络体系。 一、定义与特点 定义： WLAN通过无线信道代替有线传输介质连接两个或多个设备形成一个…...
Flask RESTful 示例
目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题： 下面创建一个简单的Flask RESTful API示例。首先，我们需要创建环境，安装必要的依赖，然后…...
如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要：设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP（Work-in-Progress）弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中，设立专门的紧急任务通道尤为重要，这能…...
AI书签管理工具开发全记录（十九）：嵌入资源处理
1.前言 📝 在上一篇文章中，我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源，方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包，彻底改变了静态资源管理的…...
听写流程自动化实践，轻量级教育辅助
随着智能教育工具的发展，越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式，也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建，…...
html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码
目录 一、👨🎓网站题目 二、✍️网站描述 三、📚网站介绍 四、🌐网站效果 五、🪓 代码实现 🧱HTML 六、🥇 如何让学习不再盲目 七、🎁更多干货 一、👨…...
20个超级好用的 CSS 动画库
分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码，而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库，可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画，可以包含在你的网页或应用项目中。 3.An…...
jmeter聚合报告中参数详解
sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample（样本数） 表示测试中发送的请求数量，即测试执行了多少次请求。 单位，以个或者次数表示。 示例：…...
Python 实现 Web 静态服务器（HTTP 协议）
目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1）下载安装包2）配置环境变量3）安装镜像4）node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1）使用 http-server2）详解 …...
深入理解Optional：处理空指针异常
1. 使用Optional处理可能为空的集合 在Java开发中，集合判空是一个常见但容易出错的场景。传统方式虽然可行，但存在一些潜在问题： // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...
uniapp 小程序 学习（一）
利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 ：开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置，将微信开发者工具放入到Hbuilder中， 打开后出现 如下 bug 解…...