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

源码介绍

酷炫末世意境背景404单页HTML源码,背景充满着破坏一切的意境,彷佛末世的到来,可以做网站错误页或者丢失页面,将下面的代码放到空白的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弄到本地就可以了

相关推荐
回忆哆啦没有A梦2 小时前
Vue页面回退刷新问题解决方案:利用pageshow事件实现缓存页面数据重置
前端·vue.js·缓存
A_ugust__3 小时前
vue3+ts 封装跟随弹框组件,支持多种模式【多选,分组,tab等】
前端·javascript·vue.js
林九生3 小时前
【Vue3】v-dialog 中使用 execCommand(‘copy‘) 复制文本失效的原因与解决方案
前端·javascript·vue.js
yi碗汤园3 小时前
【一文了解】C#的StringSplitOptions枚举
开发语言·前端·c#
cxr8285 小时前
BMAD框架实践:掌握story-checklist提升用户故事质量
前端·人工智能·agi·智能体·ai赋能
emma羊羊5 小时前
【xsslabs】第12-19关
前端·javascript·靶场·xss
真的想不出名儿8 小时前
vue项目引入字体
前端·javascript·vue.js
胡楚昊8 小时前
Polar WEB(1-20)
前端
吃饺子不吃馅8 小时前
AntV X6图编辑器如何实现切换主题
前端·svg·图形学
余防9 小时前
XXE - 实体注入(xml外部实体注入)
xml·前端·安全·web安全·html