做最好的文档分享网站
顶部右侧自定义文字
广告位 后台主题配置管理

网站首页 网站源码 网站代码 正文

EMlog-漂亮的404页面代码

小木 2019-07-31 网站代码 4637 ℃ 26 评论

演示图

EMlog-漂亮的404页面代码 第1张

说明

EMlog-漂亮的404页面代码 第2张

rgba(144, 238 ,144, 0.5)半透明的青苹果绿   #03a9f4 蓝色

rgba(255, 255, 255, 0)则表示完全透明的白色

rgba(0, 0, 0,1 )则表示完全不透明度的黑色

rgba(255,252,153,0.5)//暖黄色

rgba(119, 103, 137, .43) //淡紫色

代码:

<?php 
/**
 * 自定义404页面
 */
if(!defined('EMLOG_ROOT')) {exit('error!');}
?>
<script>
document.title = "404 抱歉页面不存在或被删除"
</script>
<script src="//cdn.bootcss.com/jquery/2.0.3/jquery.min.js"></script>
<script>
jQuery(document).ready(function ($){
var str = document.getElementsByTagName('div')[0].innerHTML.toString();
var i = 0;
document.getElementsByTagName('div')[0].innerHTML = "";

setTimeout(function() {
    var se = setInterval(function() {
        i++;
        document.getElementsByTagName('div')[0].innerHTML = str.slice(0, i) + "|";
        if (i == str.length) {
            clearInterval(se);
            document.getElementsByTagName('div')[0].innerHTML = str;
        }
    }, 10);
},0);
});
</script>
<style>
* {margin: 0; padding: 0; border: 0;font-size: 100%; font: inherit;vertical-align: baseline; box-sizing: border-box;color: inherit;}
body {background-image: linear-gradient(120deg, rgba(144, 238 ,144, 0.5) 0%, #03a9f4 100%);height: 100vh;}
h1 {font-size: 45vw;text-align: center;position: fixed; width: 100vw; z-index: 1; color: rgba(255, 255, 255, 0.14901960784313725);text-shadow: 0 0 50px rgba(0, 0, 0, 0.07);top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%); font-family: "Montserrat", monospace;}
div { background: rgba(0, 0, 0, 0); width: 70vw;position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); margin: 0 auto; padding: 30px 30px 10px;box-shadow: 0 0 150px -20px rgba(0, 0, 0, 0.5);z-index: 3;}
P { font-family: "Share Tech Mono", monospace;color: #000;margin: 0 0 20px; font-size: 17px;line-height: 1.2;}
span {color: #fff;}
i {color: #000;}
div a {text-decoration: none;color: #f44336;}
b {color: #81a2be;}
a.avatar { position: fixed;bottom: 15px; right: -100px; -webkit-animation: slide 0.5s 4.5s forwards; animation: slide 0.5s 4.5s forwards; display: block;z-index: 4}
a.avatar img{width:44px;border:2px solid #fff;border-radius:100%;}
@-webkit-keyframes slide{from{right:-100px;opacity:0;-webkit-transform:rotate(360deg);transform:rotate(360deg);}
to{right:15px;opacity:1;-webkit-transform:rotate(0);transform:rotate(0);}
}
@keyframes slide{from{right:-100px;opacity:0;-webkit-transform:rotate(360deg);transform:rotate(360deg);}
to{right:15px;opacity:1;-webkit-transform:rotate(0);transform:rotate(0);}
}
</style>
<h1>404</h1>
<div><p>><span>官网</span>: <i><?php echo BLOG_URL; ?></i></p>
<p>><span>格言</span>: <i>一花一世界,一叶一追寻,一曲一场叹,一生为一人</i></p>
<p>><span>信仰</span>: 任何足够先进的技术,初看都与魔法无异</b>...</p>
<p>><span>抱歉,没有你要找的文章...</span></p><p>> <span>[<a href="<?php echo BLOG_URL; ?>">返回首页</a>]</span></p>
</div>

</body>
</html>
请在这里放置你的在线分享代码
广告位 后台主题配置管理

已有26位网友发表了看法:

  • 腾讯视频

    腾讯视频  评论于 [2019-08-01 07:54:52]  回复

    [F5] [F5] asd 啊实打实的十大

  • 初衷

    初衷  评论于 [2019-08-12 18:07:46]  回复

    拿走了看看

  • 88888

    88888  评论于 [2019-08-23 00:37:17]  回复

    哈哈哈哈哈哈

  • 公子扶苏

    公子扶苏  评论于 [2019-08-27 06:39:57]  回复

    就是看得见奥斯卡的健身卡

  • 争欲

    争欲  评论于 [2019-09-21 21:41:44]  回复

    可以

  • a'ゞ小奇

    a'ゞ小奇  评论于 [2019-10-22 21:05:10]  回复

    我感觉这个还是挺好的

  • 听雨

    听雨  评论于 [2021-08-26 19:29:43]  回复

    可以的

  • 听雨

    听雨  评论于 [2021-08-26 19:32:23]  回复

    源码没了

    • 小木

      小木  评论于 [2021-08-28 20:08:40]  回复

      @听雨:补了

  • 听雨

    听雨  评论于 [2021-08-28 09:20:44]  回复

    重新分享一下

    • 小木

      小木  评论于 [2021-08-28 10:39:19]  回复

      @听雨:好的,等我晚上重新补

    • 小木

      小木  评论于 [2021-08-28 20:08:23]  回复

      @听雨:已经补上了

  • 小木

    小木  评论于 [2021-08-28 10:39:19]  回复

    @听雨:好的,等我晚上重新补

  • 小木

    小木  评论于 [2021-08-28 20:08:23]  回复

    @听雨:已经补上了

  • 小木

    小木  评论于 [2021-08-28 20:08:40]  回复

    @听雨:补了

欢迎 发表评论:

    此处不必修改,程序自动调用!
文章归档
站点信息
  • 文章总数:2512
  • 页面总数:8
  • 分类总数:45
  • 标签总数:385
  • 评论总数:699
  • 浏览总数:1735417
标签列表
最近发表
广告位 后台主题配置管理