HTML网站引导载入页源码

由于工作较忙,随性更新。admin@stgod.com

其它的先不说,先来感受一下预览效果 Demo

 

源码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.   <title>STGOD | 只为改变世界 STGOD.com</title>
  6.   <style type="text/css">
  7. * {
  8.     margin: 0;
  9.     padding: 0;
  10.     -webkit-box-sizing: border-box;
  11.     -moz-box-sizing: border-box;
  12.     -ms-box-sizing: border-box;
  13.     -o-box-sizing: border-box;
  14.     box-sizing: border-box;
  15.     font: 14px "Microsoft YaHei",Helvetica,Arial,Lucida Grande,Tahoma,sans-serif;
  16. }
  17. html, body {
  18.     margin: 0;
  19.     padding: 0;
  20.     font: 16px/1.4 'Lato', sans-serif;
  21.     color: #fefeff;
  22.     -webkit-font-smoothing: antialiased;
  23.     font-smoothing: antialiased;
  24. }
  25. body {
  26.     background: rgb(8,5,16);
  27.     overflow:hidden;
  28.     -webkit-touch-callout: none;
  29.     -webkit-user-select: none;
  30.     -khtml-user-select: none;
  31.     -moz-user-select: none;
  32.     -ms-user-select: none;
  33.     user-select: none;
  34. }
  35. h1 {
  36.     font: 2.75em 'Cinzel', serif;
  37.     font-weight: bold;
  38.     letter-spacing: 0.35em;
  39.     text-shadow: 0 0 25px rgba(254,254,255,0.85);
  40. }
  41. h2 {
  42.     font: 1.45em 'Cinzel', serif;
  43.     font-weight: 400;
  44.     letter-spacing: 0.5em;
  45.     text-shadow: 0 0 25px rgba(254,254,255,0.85);
  46.     text-transform: lowercase;
  47. }
  48. [class^="letter"] {
  49.     -webkit-transition: opacity 3s ease;
  50.     -moz-transition: opacity 3s ease;
  51.     transition: opacity 3s ease;
  52. }
  53. .letter-0  { transition-delay: 0.2s; }
  54. .letter-1  { transition-delay: 0.4s; }
  55. .letter-2  { transition-delay: 0.6s; }
  56. .letter-3  { transition-delay: 0.8s; }
  57. .letter-4  { transition-delay: 1.0s; }
  58. .letter-5  { transition-delay: 1.2s; }
  59. .letter-6  { transition-delay: 1.4s; }
  60. .letter-7  { transition-delay: 1.6s; }
  61. .letter-8  { transition-delay: 1.8s; }
  62. .letter-9  { transition-delay: 2.0s; }
  63. .letter-10 { transition-delay: 2.2s; }
  64. .letter-11 { transition-delay: 2.4s; }
  65. .letter-12 { transition-delay: 2.6s; }
  66. .letter-13 { transition-delay: 2.8s; }
  67. .letter-14 { transition-delay: 3.0s; }
  68. h1, h2 {
  69.     visibility: hidden;
  70.     -webkit-transform: translate3d(000);
  71.     -moz-transform: translate3d(000);
  72.     transform: translate3d(000);
  73. }
  74. h1.transition-in,
  75. h2.transition-in {
  76.     visibility: visible;
  77. }
  78. h1 [class^="letter"],
  79. h2 [class^="letter"] {
  80.     opacity: 0;
  81. }
  82. h1.transition-in [class^="letter"],
  83. h2.transition-in [class^="letter"] {
  84.     opacity: 1;
  85. }
  86. #container {
  87. display: table;
  88. position: absolute;
  89. z-index: 20;
  90. width: 100%;
  91. height: 100%;
  92. text-align: center;
  93. cursor: none;
  94. left: 15px;
  95. }
  96. #container > div {
  97.     display: table-cell;
  98.     vertical-align: middle;
  99. }
  100. #container p {
  101.     position: absolute;
  102.     width: 100%;
  103.     left: 0;
  104.     bottom: 25px;
  105.     font-size0.8em;
  106.     letter-spacing: 0.1em;
  107.     font-weight: 300;
  108.     color: #76747a;
  109.     -webkit-font-smoothing: subpixel-antialiased;
  110.     font-smoothing: subpixel-antialiased;
  111. }
  112. #container p strong {
  113. color: #b3abc5;
  114. font-size: 5em;
  115. }
  116. #container p span {
  117.     font-size0.75em;
  118.     padding: 0 2px;
  119. }
  120. #canvas {
  121.     position: absolute;
  122.     z-index: 10;
  123.     top: 0;
  124.     left: 0;
  125.     width: 100%;
  126.     height: 100%;
  127.     cursor: none;
  128. }
  129. #stats {
  130.     position: absolute;
  131.     z-index: 10;
  132.     left: 10px;
  133.     top: 10px;
  134. }
  135. .dg.ac {
  136.     z-index: 100 !important;
  137. }
  138. #container div p strong a {
  139. color: #999;
  140. font-size0.5em;
  141. }
  142. body,td,th {
  143. font-family: Lato, sans-serif;
  144. }
  145. a:link {
  146. text-decoration: none;
  147. }
  148. a:visited {
  149. text-decoration: none;
  150. }
  151. a:hover {
  152. text-decoration: none;
  153. }
  154. a:active {
  155. text-decoration: none;
  156. }
  157. </style>
  158.  </head>
  159.  <body ondragstart="window.event.returnValue=false" oncontextmenu="window.event.returnValue=false" onselectstart="event.returnValue=false">
  160.   <div id="container">
  161.    <div>
  162.     <!--内容部分-->
  163.     <h1 id="h1">STGOD 只为改变世界</h1>
  164.     <h2 id="h2">分享的不仅是技术,互联网最后一片净土。</h2>
  165.     <p>&nbsp;</p>
  166.     <p><strong><a href="https://stgod.com">进入主站</a></strong></p>
  167.     <p>&nbsp;</p>
  168.     <p>&nbsp;</p>
  169.     <p>&nbsp;</p>
  170.     <p>&nbsp;</p>
  171.     <p>&nbsp;</p>
  172.    </div>
  173.   </div>
  174.   <canvas id="canvas"></canvas>
  175.   <audio autoplay="autoplay">
  176.   <!--背景音乐地址-->
  177.    <source src="http://7jpovv.com1.z0.glb.clouddn.com/The-Mass.mp3" type="audio/mpeg"></source>
  178.   </audio>
  179.   <script>
  180. var Stats=function(){var e=Date.now(),t=e,i=0,n=1/0,r=0,s=0,o=1/0,a=0,l=0,h=0,c=document.createElement("div");c.id="stats",c.addEventListener("mousedown",function(e){e.preventDefault(),v(++h%2)},!1),c.style.cssText="width:80px;opacity:0.9;cursor:pointer";var u=document.createElement("div");u.id="fps",u.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#002",c.appendChild(u);var d=document.createElement("div");d.id="fpsText",d.style.cssText="color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px",d.innerHTML="FPS",u.appendChild(d);var p=document.createElement("div");for(p.id="fpsGraph",p.style.cssText="position:relative;width:74px;height:30px;background-color:#0ff",u.appendChild(p);74>p.children.length;){var f=document.createElement("span");f.style.cssText="width:1px;height:30px;float:left;background-color:#113",p.appendChild(f)}var m=document.createElement("div");m.id="ms",m.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#020;display:none",c.appendChild(m);var g=document.createElement("div");g.id="msText",g.style.cssText="color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px",g.innerHTML="MS",m.appendChild(g);var y=document.createElement("div");for(y.id="msGraph",y.style.cssText="position:relative;width:74px;height:30px;background-color:#0f0",m.appendChild(y);74>y.children.length;){var f=document.createElement("span");f.style.cssText="width:1px;height:30px;float:left;background-color:#131",y.appendChild(f)}var v=function(e){switch(h=e){case 0:u.style.display="block",m.style.display="none";break;case 1:u.style.display="none",m.style.display="block"}},b=function(e,t){var i=e.appendChild(e.firstChild);i.style.height=t+"px"};return{REVISION:11,domElement:c,setMode:v,begin:function(){e=Date.now()},end:function(){var h=Date.now();return i=h-e,n=Math.min(n,i),r=Math.max(r,i),g.textContent=i+" MS ("+n+"-"+r+")",b(y,Math.min(30,30-30*(i/200))),l++,h>t+1e3&&(s=Math.round(1e3*l/(h-t)),o=Math.min(o,s),a=Math.max(a,s),d.textContent=s+" FPS ("+o+"-"+a+")",b(p,Math.min(30,30-30*(s/100))),t=h,l=0),h},update:function(){e=this.end()}}};
  181. </script>
  182.   <script>
  183. ;(function(window) {
  184. var ctx,
  185.     hue,
  186.     logo,
  187.     form,
  188.     buffer,
  189.     target = {},
  190.     tendrils = [],
  191.     settings = {};
  192. settings.debug = true;
  193. settings.friction = 0.5;
  194. settings.trails = 20;
  195. settings.size = 50;
  196. settings.dampening = 0.25;
  197. settings.tension = 0.98;
  198. Math.TWO_PI = Math.PI * 2;
  199. // ========================================================================================
  200. // Oscillator
  201. // ----------------------------------------------------------------------------------------
  202. function Oscillator(options) {
  203.     this.init(options || {});
  204. }
  205. Oscillator.prototype = (function() {
  206.     var value = 0;
  207.     return {
  208.         init: function(options) {
  209.             this.phase = options.phase || 0;
  210.             this.offset = options.offset || 0;
  211.             this.frequency = options.frequency || 0.001;
  212.             this.amplitude = options.amplitude || 1;
  213.         },
  214.         update: function() {
  215.             this.phase += this.frequency;
  216.             value = this.offset + Math.sin(this.phase) * this.amplitude;
  217.             return value;
  218.         },
  219.         value: function() {
  220.             return value;
  221.         }
  222.     };
  223. })();
  224. // ========================================================================================
  225. // Tendril
  226. // ----------------------------------------------------------------------------------------
  227. function Tendril(options) {
  228.     this.init(options || {});
  229. }
  230. Tendril.prototype = (function() {
  231.     function Node() {
  232.         this.x = 0;
  233.         this.y = 0;
  234.         this.vy = 0;
  235.         this.vx = 0;
  236.     }
  237.     return {
  238.         init: function(options) {
  239.             this.spring = options.spring + (Math.random() * 0.1) - 0.05;
  240.             this.friction = settings.friction + (Math.random() * 0.01) - 0.005;
  241.             this.nodes = [];
  242.             for(var i = 0, node; i < settings.size; i++) {
  243.                 node = new Node();
  244.                 node.x = target.x;
  245.                 node.y = target.y;
  246.                 this.nodes.push(node);
  247.             }
  248.         },
  249.         update: function() {
  250.             var spring = this.spring,
  251.                 node = this.nodes[0];
  252.             node.vx += (target.x - node.x) * spring;
  253.             node.vy += (target.y - node.y) * spring;
  254.             for(var prev, i = 0, n = this.nodes.length; i < n; i++) {
  255.                 node = this.nodes[i];
  256.                 if(i > 0) {
  257.                     prev = this.nodes[i - 1];
  258.                     node.vx += (prev.x - node.x) * spring;
  259.                     node.vy += (prev.y - node.y) * spring;
  260.                     node.vx += prev.vx * settings.dampening;
  261.                     node.vy += prev.vy * settings.dampening;
  262.                 }
  263.                 node.vx *= this.friction;
  264.                 node.vy *= this.friction;
  265.                 node.x += node.vx;
  266.                 node.y += node.vy;
  267.                 spring *= settings.tension;
  268.             }
  269.         },
  270.         draw: function() {
  271.             var x = this.nodes[0].x,
  272.                 y = this.nodes[0].y,
  273.                 a, b;
  274.             ctx.beginPath();
  275.             ctx.moveTo(x, y);
  276.             for(var i = 1, n = this.nodes.length - 2; i < n; i++) {
  277.                 a = this.nodes[i];
  278.                 b = this.nodes[i + 1];
  279.                 x = (a.x + b.x) * 0.5;
  280.                 y = (a.y + b.y) * 0.5;
  281.                 ctx.quadraticCurveTo(a.x, a.y, x, y);
  282.             }
  283.             a = this.nodes[i];
  284.             b = this.nodes[i + 1];
  285.             ctx.quadraticCurveTo(a.x, a.y, b.x, b.y);
  286.             ctx.stroke();
  287.             ctx.closePath();
  288.         }
  289.     };
  290. })();
  291. // ----------------------------------------------------------------------------------------
  292. function init(event) {
  293.     document.removeEventListener('mousemove', init);
  294.     document.removeEventListener('touchstart', init);
  295.     document.addEventListener('mousemove', mousemove);
  296.     document.addEventListener('touchmove', mousemove);
  297.     document.addEventListener('touchstart', touchstart);
  298.     mousemove(event);
  299.     reset();
  300.     loop();
  301. }
  302. function reset() {
  303.     tendrils = [];
  304.     for(var i = 0; i < settings.trails; i++) {
  305.         tendrils.push(new Tendril({
  306.             spring: 0.45 + 0.025 * (i / settings.trails)
  307.         }));
  308.     }
  309. }
  310. function loop() {
  311.     if(!ctx.running) return;
  312.     ctx.globalCompositeOperation = 'source-over';
  313.     ctx.fillStyle = 'rgba(8,5,16,0.4)';
  314.     ctx.fillRect(00, ctx.canvas.width, ctx.canvas.height);
  315.     ctx.globalCompositeOperation = 'lighter';
  316.     ctx.strokeStyle = 'hsla(' + Math.round(hue.update()) + ',90%,50%,0.25)';
  317.     ctx.lineWidth = 1;
  318.     if(ctx.frame % 60 == 0) {
  319.         console.log(hue.update(), Math.round(hue.update()), hue.phase, hue.offset, hue.frequency, hue.amplitude);
  320.     }
  321.     for(var i = 0, tendril; i < settings.trails; i++) {
  322.         tendril = tendrils[i];
  323.         tendril.update();
  324.         tendril.draw();
  325.     }
  326.     ctx.frame++;
  327.     ctx.stats.update();
  328.     requestAnimFrame(loop);
  329. }
  330. function resize() {
  331.     ctx.canvas.width = window.innerWidth;
  332.     ctx.canvas.height = window.innerHeight;
  333. }
  334. function start() {
  335.     if(!ctx.running) {
  336.         ctx.running = true;
  337.         loop();
  338.     }
  339. }
  340. function stop() {
  341.     ctx.running = false;
  342. }
  343. function mousemove(event) {
  344.     if(event.touches) {
  345.         target.x = event.touches[0].pageX;
  346.         target.y = event.touches[0].pageY;
  347.     } else {
  348.         target.x = event.clientX
  349.         target.y = event.clientY;
  350.     }
  351.     event.preventDefault();
  352. }
  353. function touchstart(event) {
  354.     if(event.touches.length == 1) {
  355.         target.x = event.touches[0].pageX;
  356.         target.y = event.touches[0].pageY;
  357.     }
  358. }
  359. function keyup(event) {
  360.     switch(event.keyCode) {
  361.         case 32:
  362.             save();
  363.             break;
  364.         default:
  365.             // console.log(event.keyCode);
  366.     }
  367. }
  368. function letters(id) {
  369.     var el = document.getElementById(id),
  370.         letters = el.innerHTML.replace('&amp;', '&').split(''),
  371.         heading = '';
  372.     for(var i = 0, n = letters.length, letter; i < n; i++) {
  373.         letter = letters[i].replace('&', '&amp');
  374.         heading += letter.trim() ? '<span class="letter-' + i + '">' + letter + '</span>' : '&nbsp;';
  375.     }
  376.     el.innerHTML = heading;
  377.     setTimeout(function() {
  378.         el.className = 'transition-in';
  379.     }, (Math.random() * 500) + 500);
  380. }
  381. function save() {
  382.     if(!buffer) {
  383.         buffer = document.createElement('canvas');
  384.         buffer.width = screen.availWidth;
  385.         buffer.height = screen.availHeight;
  386.         buffer.ctx = buffer.getContext('2d');
  387.         form = document.createElement('form');
  388.         form.method = 'post';
  389.         form.input = document.createElement('input');
  390.         form.input.type = 'hidden';
  391.         form.input.name = 'data';
  392.         form.appendChild(form.input);
  393.         document.body.appendChild(form);
  394.     }
  395.     buffer.ctx.fillStyle = 'rgba(8,5,16)';
  396.     buffer.ctx.fillRect(00, buffer.width, buffer.height);
  397.     buffer.ctx.drawImage(canvas,
  398.         Math.round(buffer.width / 2 - canvas.width / 2),
  399.         Math.round(buffer.height / 2 - canvas.height / 2)
  400.     );
  401.     buffer.ctx.drawImage(logo,
  402.         Math.round(buffer.width / 2 - logo.width / 4),
  403.         Math.round(buffer.height / 2 - logo.height / 4),
  404.         logo.width / 2,
  405.         logo.height / 2
  406.     );
  407.     window.open(buffer.toDataURL(), 'wallpaper', 'top=0,left=0,width=' + buffer.width + ',height=' + buffer.height);
  408.     // form.input.value = buffer.toDataURL().substr(22);
  409.     // form.submit();
  410. }
  411. window.requestAnimFrame = (function() {
  412.     return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(fn) { window.setTimeout(fn, 1000 / 60) };
  413. })();
  414. window.onload = function() {
  415.     ctx = document.getElementById('canvas').getContext('2d');
  416.     ctx.stats = new Stats();
  417.     ctx.running = true;
  418.     ctx.frame = 1;
  419.     logo = new Image();
  420.     logo.src = '';
  421.     hue = new Oscillator({
  422.         phase: Math.random() * Math.TWO_PI,
  423.         amplitude: 85,
  424.         frequency: 0.0015,
  425.         offset: 285
  426.     });
  427.     letters('h1');
  428.     letters('h2');
  429.     document.addEventListener('mousemove', init);
  430.     document.addEventListener('touchstart', init);
  431.     document.body.addEventListener('orientationchange', resize);
  432.     window.addEventListener('resize', resize);
  433.     window.addEventListener('keyup', keyup);
  434.     window.addEventListener('focus', start);
  435.     window.addEventListener('blur', stop);
  436.     resize();
  437.     if(window.DEBUG) {
  438.         var gui = new dat.GUI();
  439.         // gui.add(settings, 'debug');
  440.         settings.gui.add(settings, 'trails', 130).onChange(reset);
  441.         settings.gui.add(settings, 'size', 2575).onFinishChange(reset);
  442.         settings.gui.add(settings, 'friction', 0.450.55).onFinishChange(reset);
  443.         settings.gui.add(settings, 'dampening', 0.010.4).onFinishChange(reset);
  444.         settings.gui.add(settings, 'tension', 0.950.999).onFinishChange(reset);
  445.         document.body.appendChild(ctx.stats.domElement);
  446.     }
  447. };
  448. })(window);
  449. </script>
  450.  </body>
  451. </html>

转载请注明出处:https://stgod.com/1573/

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: