源码介绍
酷炫末世意境背景404单页HTML源码，背景充满着破坏一切的意境，彷佛末世的到来，可以做网站错误页或者丢失页面，将下面的代码放到空白的HTML里面，然后上传到服务器里面，设置好重定向即可
效果预览
完整源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>404 Apocalypse</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css"/>
<style>@import url(https://fonts.googleapis.com/css?family=Sigmar+One);
@import url(https://fonts.googleapis.com/css?family=Poiret+One);
body {
background-image:url('https://wallpapercave.com/wp/jj5KxtS.jpg');
background-attachment:fixed;
background-size:cover;
background-color: #222;
margin:0px;
padding:0px;
overflow:hidden;
font-family: 'Poiret One', cursive;
}
h1
{
font-size:200px;
width:100vw;
text-align:center;
color:rgba(0,255,0,1);
font-family: 'Poiret One', cursive;
}
span
{
cursor:move;
}
.underline
{
font-size:50px;
color:white;
text-align:center;
}
.button
{
font-size:50px;
color:white;
font-family: 'Poiret One', cursive;
text-align:center;
}
.button span
{
cursor:pointer;
padding:10px;
border-style:solid;
border-radius:5px;
transition:border-color 0.75s;
-webkit-transition:border-color 0.75s;
}
.button span:hover
{
border-color:rgb(0,255,0);
}</style>
</head>
<body>
<div class='underline'>
<span>Sorry</span><span>, </span><span>this </span><span>page </span><span>didn</span><span>'</span><span>t</span><span> survive</span>
</div>
<h1><span>4</span><span>0</span><span>4</span></h1>
<div class='button'><a title='https://www.qqmu.com'><span >Join the survivors</span></a></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/tinybigideas/jGravity/f3265bdd/jGravity-min.js"></script>
<script>/* refresh if you didn't have body's background which appears*/
$(function() {
$(document).ready(function() {
var one =false;
$('.button span').mouseover(function(){
if(!one){
$('body').jGravity({
target: 'span',
ignoreClass: 'dontMove',
weight: 25,
depth: 100,
drag: true
});
one =true;
};
});
});
});</script>
</body>
</html>
页面加载有点慢，可以将远程css和js弄到本地就可以了
