整体效果如上，图片本来是动态的！

那么话不多说，开始发教程。

先下载必要的文件：点击下载

下载好之后解压到你的主题根目录，然后我们在根目录创建一个404.php文件，在这里面我们贴上代码：

<html>
    <head>
        <meta charset="UTF-8">
        <title>亲，你走失啦！</title>
        <style type="text/css" abt="234"></style>
        <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/style.css">
        <style type="text/css">
        object, embed {
            -webkit-animation-duration:.001s;
            -webkit-animation-name:playerInserted;
            -ms-animation-duration:.001s;
            -ms-animation-name:playerInserted;
            -o-animation-duration:.001s;
            -o-animation-name:playerInserted;
            animation-duration:.001s;
            animation-name:playerInserted;
        }
        @-webkit-keyframes playerInserted {
            from {
                opacity:0.99;
            }
            to {
                opacity:1;
            }
        }
        @-ms-keyframes playerInserted {
            from {
                opacity:0.99;
            }
            to {
                opacity:1;
            }
        }
        @-o-keyframes playerInserted {
            from {
                opacity:0.99;
            }
            to {
                opacity:1;
            }
        }
        @keyframes playerInserted {
            from {
                opacity:0.99;
            }
            to {
                opacity:1;
            }
        }
        </style>
    </head>
    <body>
        <div align="center">
            <img src="<?php bloginfo('template_url'); ?>/404/404.gif" border="0" height="">
            <br>找不到这个页面啦！是不是天然呆打错啦！
            <br>
            <br>
            <audio src="<?php bloginfo('template_url'); ?>/404/404.mp3" controls="controls"></audio>
            <br>
            <br>
            <div class="qq-qun" style="text-align:center;"><a class="button_green" href="<?php echo get_option('home'); ?>" target="_blank" rel="nofollow">返回首页</a></div>
            <br>&copy; 2018 <?php echo get_option('name'); ?> All Rights Reserved.</div>
        <div id="cli_dialog_div"></div>
    </body>
</html>

保存刷新，大功告成，是不是萌萌哒的呢！

               

获取资源

演示地址

除特别注明外，本站所有文章均为WordPress主题之家原创，转载请注明出处来自https://www.zhutihome.net/7656.html

收藏
  • 0 个人已赞
上一篇

下一篇

相关文章

参与评论