IT评测·应用市场-qidao123.com

标题: 酷炫末世意境配景404单页HTML源码 [打印本页]
作者: 冬雨财经    时间: 2024-7-23 11:42
标题: 酷炫末世意境配景404单页HTML源码
源码介绍

酷炫末世意境配景404单页HTML源码，配景布满着破坏一切的意境，彷佛末世的到来，可以做网站错误页或者丢失页面，将下面的代码放到空白的HTML内里，然后上传到服务器内里，设置好重定向即可
结果预览


完整源码

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>404 Apocalypse</title>
  6.                 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css"/>
  7.                 <style>@import url(https://fonts.googleapis.com/css?family=Sigmar+One);
  8. @import url(https://fonts.googleapis.com/css?family=Poiret+One);
  10. body {
  11.   background-image:url('https://wallpapercave.com/wp/jj5KxtS.jpg');
  12.   background-attachment:fixed;
  13.   background-size:cover;
  14.   background-color: #222;
  15.   margin:0px;
  16.   padding:0px;
  17.   overflow:hidden;
  18.   font-family: 'Poiret One', cursive;
  19. }
  21. h1
  22. {
  23.   font-size:200px;
  24.   width:100vw;
  25.   text-align:center;
  26.   
  27.   color:rgba(0,255,0,1);
  28.   font-family: 'Poiret One', cursive;
  30. }
  34. span
  35. {
  36.   cursor:move;
  37. }
  39. .underline
  40. {
  41.   font-size:50px;
  42.   color:white;
  43.   text-align:center;
  44. }
  46. .button
  47. {
  48.   font-size:50px;
  49.   color:white;
  50.   
  51.   font-family: 'Poiret One', cursive;
  52.   
  53.   text-align:center;
  54. }
  56. .button span
  57. {
  58.   cursor:pointer;
  59.   padding:10px;
  60.   
  61.   border-style:solid;
  62.   border-radius:5px;
  63.   
  64.   transition:border-color 0.75s;
  65.   -webkit-transition:border-color 0.75s;
  66. }
  68. .button span:hover
  69. {
  70.   border-color:rgb(0,255,0);
  71. }</style>
  72.         </head>
  73.         <body>
  74.                     <div class='underline'>
  75.                       <span>Sorry</span><span>, </span><span>this </span><span>page </span><span>didn</span><span>'</span><span>t</span><span> survive</span>
  76.                     </div>               
  77.                     <h1><span>4</span><span>0</span><span>4</span></h1>                    
  78.                     <div class='button'><a title='https://www.qqmu.com'><span >Join the survivors</span></a></div>
  79.         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  80.         <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
  81.         <script src="https://cdn.rawgit.com/tinybigideas/jGravity/f3265bdd/jGravity-min.js"></script>
  82.         <script>/* refresh if you didn't have body's background which appears*/
  83. $(function() {
  84. $(document).ready(function() {
  85.   var one =false;
  86.   
  87.    $('.button span').mouseover(function(){     
  88.           if(!one){
  89.                              $('body').jGravity({
  90.                target: 'span',
  91.                ignoreClass: 'dontMove',
  92.                weight: 25,
  93.                depth: 100,
  94.                drag: true
  95.                       });
  96.               one =true;
  97.        };
  98.    });
  100.                          
  101. });
  102. });</script>
  103.         </body>
  104. </html>
复制代码
页面加载有点慢，可以将远程css和js弄到本地就可以了

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/) Powered by Discuz! X3.4