赤域吧MIPCMS404页面模板
2024-06-27 11:48:38
文章目录[隐藏]
- 404 页面前言
- 404 页面特色
- 赤域吧 404 页面代码
- 赤域吧 404 页面截图
- 赤域吧 404 页面演示效果
404 页面前言
今天给大家带来一个 404 页面的干货。此模板来源于我运营的赤域吧(chiyuba.com)资源站，如果大家苦于不知道再MIPCMS修改 404 页面的童鞋可以康康呀！
404 页面特色
此页面采用最新的 CSS3 动画效果，通过小方块动画给大家耳目一新的感觉。通过此 404 页面，小白也可以轻松配置 mipcms 的 404 页面。
赤域吧 404 页面代码
复制下面的代码，按照图中的方式操作即可，如有不懂文末可留言。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>赤域吧 _ 赤域吧资源网 _404 页面 _<?php echo htmlentities($message); ?></title>
<!-- 此处 3 代表几秒后自动返回到 URL 指定的网址： 一般填写你的网站首页 -->
<meta http-equiv="refresh" content="3; URL=https://chiyuba.com"/>
<link rel="canonical" href="https://chiyuba.com">
<style mip-custom>
.message{position:absolute;right:5%;color:#fafafa;font-size:30px;animation:textRotate 0.8s linear 0.5s infinite alternate;}.message-tip{top:20%;}.message-home{top:30%;}.message-home a{color:#fafafa;text-decoration:none;cursor:pointer;}body{padding:0px;margin:0px;border:0px;width:100%;height:100%;}@keyframes textRotate{from{transform-origin:top;transform:rotateX(-30deg);}to{transform-origin:top;transform:rotateX(12deg);}}.NotPage{position:relative;z-index:-10;background:#000;height:100vh;overflow:hidden;display:flex;font-family:"Anton",sans-serif;justify-content:center;align-items:center;-webkit-perspective:1000px;perspective:1000px;}div{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;}.rail{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;-webkit-transform:rotateX(-30deg) rotateY(-30deg);transform:rotateX(-30deg) rotateY(-30deg);}.rail .stamp{position:absolute;width:200px;height:200px;display:flex;justify-content:center;align-items:center;background:#141414;color:#fff;font-size:7rem;}.rail .stamp:nth-child(1){-webkit-animation:stampSlide 40000ms -2300ms linear infinite;animation:stampSlide 40000ms -2300ms linear infinite;}.rail .stamp:nth-child(2){-webkit-animation:stampSlide 40000ms -4300ms linear infinite;animation:stampSlide 40000ms -4300ms linear infinite;}.rail .stamp:nth-child(3){-webkit-animation:stampSlide 40000ms -6300ms linear infinite;animation:stampSlide 40000ms -6300ms linear infinite;}.rail .stamp:nth-child(4){-webkit-animation:stampSlide 40000ms -8300ms linear infinite;animation:stampSlide 40000ms -8300ms linear infinite;}.rail .stamp:nth-child(5){-webkit-animation:stampSlide 40000ms -10300ms linear infinite;animation:stampSlide 40000ms -10300ms linear infinite;}.rail .stamp:nth-child(6){-webkit-animation:stampSlide 40000ms -12300ms linear infinite;animation:stampSlide 40000ms -12300ms linear infinite;}.rail .stamp:nth-child(7){-webkit-animation:stampSlide 40000ms -14300ms linear infinite;animation:stampSlide 40000ms -14300ms linear infinite;}.rail .stamp:nth-child(8){-webkit-animation:stampSlide 40000ms -16300ms linear infinite;animation:stampSlide 40000ms -16300ms linear infinite;}.rail .stamp:nth-child(9){-webkit-animation:stampSlide 40000ms -18300ms linear infinite;animation:stampSlide 40000ms -18300ms linear infinite;}.rail .stamp:nth-child(10){-webkit-animation:stampSlide 40000ms -20300ms linear infinite;animation:stampSlide 40000ms -20300ms linear infinite;}.rail .stamp:nth-child(11){-webkit-animation:stampSlide 40000ms -22300ms linear infinite;animation:stampSlide 40000ms -22300ms linear infinite;}.rail .stamp:nth-child(12){-webkit-animation:stampSlide 40000ms -24300ms linear infinite;animation:stampSlide 40000ms -24300ms linear infinite;}.rail .stamp:nth-child(13){-webkit-animation:stampSlide 40000ms -26300ms linear infinite;animation:stampSlide 40000ms -26300ms linear infinite;}.rail .stamp:nth-child(14){-webkit-animation:stampSlide 40000ms -28300ms linear infinite;animation:stampSlide 40000ms -28300ms linear infinite;}.rail .stamp:nth-child(15){-webkit-animation:stampSlide 40000ms -30300ms linear infinite;animation:stampSlide 40000ms -30300ms linear infinite;}.rail .stamp:nth-child(16){-webkit-animation:stampSlide 40000ms -32300ms linear infinite;animation:stampSlide 40000ms -32300ms linear infinite;}.rail .stamp:nth-child(17){-webkit-animation:stampSlide 40000ms -34300ms linear infinite;animation:stampSlide 40000ms -34300ms linear infinite;}.rail .stamp:nth-child(18){-webkit-animation:stampSlide 40000ms -36300ms linear infinite;animation:stampSlide 40000ms -36300ms linear infinite;}.rail .stamp:nth-child(19){-webkit-animation:stampSlide 40000ms -38300ms linear infinite;animation:stampSlide 40000ms -38300ms linear infinite;}.rail .stamp:nth-child(20){-webkit-animation:stampSlide 40000ms -40300ms linear infinite;animation:stampSlide 40000ms -40300ms linear infinite;}@-webkit-keyframes stampSlide{0%{-webkit-transform:rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);transform:rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);}100%{-webkit-transform:rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);transform:rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);}}@keyframes stampSlide{0%{-webkit-transform:rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);transform:rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);}100%{-webkit-transform:rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);transform:rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);}}.world{-webkit-transform:rotateX(-30deg) rotateY(-30deg);transform:rotateX(-30deg) rotateY(-30deg);}.world .forward{position:absolute;-webkit-animation:slide 2000ms linear infinite;animation:slide 2000ms linear infinite;}.world .box{width:200px;height:200px;-webkit-transform-origin:100% 100%;transform-origin:100% 100%;-webkit-animation:roll 2000ms cubic-bezier(1,0.01,1,1) infinite;animation:roll 2000ms cubic-bezier(1,0.01,1,1) infinite;}.world .box .wall{position:absolute;width:200px;height:200px;background:rgba(10,10,10,0.8);border:1px solid #fafafa;box-sizing:border-box;}.world .box .wall::before{content:"";position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;color:#fff;font-size:7rem;}.world .box .wall:nth-child(1){-webkit-transform:translateZ(100px);transform:translateZ(100px);}.world .box .wall:nth-child(2){-webkit-transform:rotateX(180deg) translateZ(100px);transform:rotateX(180deg) translateZ(100px);}.world .box .wall:nth-child(3){-webkit-transform:rotateX(90deg) translateZ(100px);transform:rotateX(90deg) translateZ(100px);}.world .box .wall:nth-child(3)::before{-webkit-transform:rotateX(180deg) rotateZ(90deg) translateZ(-1px);transform:rotateX(180deg) rotateZ(90deg) translateZ(-1px);-webkit-animation:zeroFour 4000ms -2000ms linear infinite;animation:zeroFour 4000ms -2000ms linear infinite;}.world .box .wall:nth-child(4){-webkit-transform:rotateX(-90deg) translateZ(100px);transform:rotateX(-90deg) translateZ(100px);}.world .box .wall:nth-child(4)::before{-webkit-transform:rotateX(180deg) rotateZ(-90deg) translateZ(-1px);transform:rotateX(180deg) rotateZ(-90deg) translateZ(-1px);-webkit-animation:zeroFour 4000ms -2000ms linear infinite;animation:zeroFour 4000ms -2000ms linear infinite;}.world .box .wall:nth-child(5){-webkit-transform:rotateY(90deg) translateZ(100px);transform:rotateY(90deg) translateZ(100px);}.world .box .wall:nth-child(5)::before{-webkit-transform:rotateX(180deg) translateZ(-1px);transform:rotateX(180deg) translateZ(-1px);-webkit-animation:zeroFour 4000ms linear infinite;animation:zeroFour 4000ms linear infinite;}.world .box .wall:nth-child(6){-webkit-transform:rotateY(-90deg) translateZ(100px);transform:rotateY(-90deg) translateZ(100px);}.world .box .wall:nth-child(6)::before{-webkit-transform:rotateX(180deg) rotateZ(180deg) translateZ(-1px);transform:rotateX(180deg) rotateZ(180deg) translateZ(-1px);-webkit-animation:zeroFour 4000ms linear infinite;animation:zeroFour 4000ms linear infinite;}@-webkit-keyframes zeroFour{0%{content:"4";}100%{content:"0";}}@keyframes zeroFour{0%{content:"4";}100%{content:"0";}}@-webkit-keyframes roll{0%{-webkit-transform:rotateZ(0deg);transform:rotateZ(0deg);}85%{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg);}87%{-webkit-transform:rotateZ(88deg);transform:rotateZ(88deg);}90%{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg);}100%{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg);}}@keyframes roll{0%{-webkit-transform:rotateZ(0deg);transform:rotateZ(0deg);}85%{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg);}87%{-webkit-transform:rotateZ(88deg);transform:rotateZ(88deg);}90%{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg);}100%{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg);}}@-webkit-keyframes slide{0%{-webkit-transform:translateX(0);transform:translateX(0);}100%{-webkit-transform:translateX(-200px);transform:translateX(-200px);}}@keyframes slide{0%{-webkit-transform:translateX(0);transform:translateX(0);}100%{-webkit-transform:translateX(-200px);transform:translateX(-200px);}}
</style>
</head>
<body>
<div class="NotPage">
<div class="message message-tip">
<?php echo htmlentities($message); ?>
</div>
<div class="message message-home"><a href="https://chiyuba.com" data-type="mip" data-title="赤域吧-chiyuba_ 专注分享免费技术教程 _ 最专业的网络资源收集平台" title="赤域吧-chiyuba_ 专注分享免费技术教程 _ 最专业的网络资源收集平台">3 秒后自动跳转至首页</a></div>
<div class="rail">
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
</div>
<div class="world">
<div class="forward">
<div class="box">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</div>
</div>
</div>
</body>
</html>赤域吧 404 页面截图
赤域吧 404 页面演示效果
https://chiyuba.com/admin
http://www.taodudu.cc/news/show-3279806.html
相关文章：
- Vue2创建404页面
- 极简404页面模板|纯HTML【少量css】
- 教你两分钟做出一个精美好用的404页面
- 纯CSS实现好看轻量级的网站404页面模板推荐！
- 分享个老司机网站报错404页面模板源码
- 404页面模板php,Thinkphp5老司机网站报错404页面模板源码
- 404页面模板
- 2022年美容师（初级）考试题模拟考试平台操作
- 各大护肤品牌国内专柜价格大全！！-zz
- 传说中的100句英语可以帮你背7000单词
- （二十九：2021.01.10）MICCAI 2019 追踪之论文纲要（下）
- 谷歌浏览器自带的翻译插件为什么不能用
- 谷歌浏览器突然不能翻译成中文了，怎么解决？（谷歌无法翻译，最新）
- 【资讯】天啦鲁，这十余款创客设计居然由FPGA搞定 [转]
- 20145221 《信息安全系统设计基础》课程总结
- 编程语言简史【转】
- TinyWS —— 一个C++写的简易WEB服务器(三)
- 关于数据库管理系统DBMS--关系型数据库（MySQL/MariaDB）
- programming language history
- “宜家一日游”之后，我终于搞懂了“蹭睡族”的心路历程
- 20145312《信息安全系统设计基础》课程总结
- 编程语言那么多，一起来速览一下吧！
- 20155236 《信息安全系统设计基础》课程总结
- 面向对象（20201219~20201225）
- 一文带你入门 SQL
- Linux系统编程（1）——文件与I/O之C标准I/O函数与系统调用I/O
- linux下的并发编程详解
- 老销售
- 2018年湖北纪检监察机关查处厅局级干部案件101件
- 我的大学校园--广东医学院
赤域吧MIPCMS404页面模板相关推荐
- [赤域吧]最小内存的影视APP【U5影视】版本V1.10
文章目录[隐藏] 软件简介 软件功能 软件截图 下载地址 软件简介 U5 影视软件 APP 为大家免费提供了超级多比较热门的影视资源,你想要看的基本上都在这里为你一网打尽了,关键是更新的速度还是满快的 ...
- 开源MIPCMS模板赤域吧资源网友情链接
文章目录[隐藏] 前言 使用方法 网站后台操作 演示地址 前言 前端时间编写了 mipcms 第一款资源网模板,其中的友情链接模块收录很高,因为单独剥离出来,算是开源吧.具体适用方法如下. 使用方法 ...
- 分享几个影视采集网站
文章目录[隐藏] 前言 卧龙资源网 ok 资源网 最大资源网 135 资源网 123 资源网 前言 大概在 2018 年左右大批影视站崛起,个人影视站长越来越多,影视 cms 也如雨后春笋似的,其中以 ...
- SEO优化之og:标签
文章目录[隐藏] SEO 优化 og 标签前言 SEO 优化 og 标签历史 SEO 优化 og 标签常用标签 SEO 优化 og 标签例子 1 SEO 优化 og 标签例子 2 SEO 优化 og ...
- MIPCMS模板开发之404页面
文章目录[隐藏] 前言 修改通用的 404 页面 修改文章调用失败的 404 页面 修改文章详情页面的 404 页面 设置后的效果展示 前言 最近在使用MIPCMS的时候想修改MIPCMS的 404 ...
- mipcms栏目分类调用
文章目录[隐藏] 调用全部分类列表 调用限制数分类列表 调用指定 ID 的二级分类列表 嵌套调用全部分类列表(包含二级) 调用全部分类列表 {mipcms:articlecategory value= ...
- MIPCMS模板开发之导航栏隐藏某项导航
文章目录[隐藏] 前言 功能描述 普通带子导航的导航栏 隐藏某个导航栏 前言 以前研究一段时间的MIPCMS模板编写,其实在开发的时候还是遇到了坑的,由于不咋会 php 所以只能到处找,因为这个 cm ...
- mipcms模板开发之block(块)内容调用方法
文章目录[隐藏] 块内容调用前言 块内容调用图片描述 块内容调用教程 块内容调用前言 最近几天在筹划资源网站,网站采用MIPCMS内容管理系统,前端采用 bootstrap4 写了一套模板. 在模板编 ...
- MIPCMS模板制作之过滤导航栏
文章目录[隐藏] 需求说明 MIPCMS 模板制作之过滤导航栏 我是用MIPCMS有段事件了,做了两个模板,其中一个虽然有 bug 但是还是上线了,地址时:https://heboy.me.这个网站是 ...
最新文章
- 《社交网站界面设计（原书第2版）》——2.13 不要中断电子邮件
- 找出网络停机的四大原因—Vecloud微云
- linux关于文件夹的知识,Ubuntu 7.10 系统文件夹相关知识
- CPU 的 ring0、ring1、ring2、ring3
- 存储映射I/O（一）
- undertow 怎么创建线程_为什么很多SpringBoot开发者放弃了Tomcat，选择了Undertow
- 监督学习之knn、naive bayes、决策树算法实验_机器学习基本概念
- 如何查看电脑显卡配置_无需软件！直接查看电脑配置方法
- 【蓝牙】 HCI log分析工具----Frontline ComProbe Protocol Analysis System使用教程
- AE效果：3D 通道
- 华为荣耀V9手机通过在Fastboot模式写ramdisk.img来获取ROOT权限 | 华为荣耀V9怎么获取ROOT权限 | 华为荣耀V9怎么用面具Magisk做ROOT权限
- 数字翻译成英语JavaScript
- 新C++(9):谈谈,翻转那些事儿
- HFM深入技术学习系列之二--规则
- h5引入json_H5页面内使用JSON动画
- 在openSUSE-Leap-15.2-DVD-x86_64下使用VLC媒体播放器
- C/C++申请和释放内存
- 佟大为扮女人秀壮腿 被大夸美艳动人
- python入门学习随记（十）
- Centos7：给/dev/mapper/cl-root分区扩容