酷炫末世意境背景404单页HTML源码

news2024/9/23 23:33:51

源码介绍

酷炫末世意境背景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>