HTML网站引导载入页源码

其它的先不说，先来感受一下预览效果 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">
  8. * {
  9.     margin: 0;
  10.     padding: 0;
  11.     -webkit-box-sizing: border-box;
  12.     -moz-box-sizing: border-box;
  13.     -ms-box-sizing: border-box;
  14.     -o-box-sizing: border-box;
  15.     box-sizing: border-box;
  16.     font: 14px "Microsoft YaHei",Helvetica,Arial,Lucida Grande,Tahoma,sans-serif;
  17. }
  18. html, body {
  19.     margin: 0;
  20.     padding: 0;
  21.     font: 16px/1.4 'Lato', sans-serif;
  22.     color: #fefeff;
  23.     -webkit-font-smoothing: antialiased;
  24.     font-smoothing: antialiased;
  25. }
  26. body {
  27.     background: rgb(8,5,16);
  28.     overflow:hidden;
  29.     -webkit-touch-callout: none;
  30.     -webkit-user-select: none;
  31.     -khtml-user-select: none;
  32.     -moz-user-select: none;
  33.     -ms-user-select: none;
  34.     user-select: none;
  35. }
  37. h1 {
  38.     font: 2.75em 'Cinzel', serif;
  39.     font-weight: bold;
  40.     letter-spacing: 0.35em;
  41.     text-shadow: 0 0 25px rgba(254,254,255,0.85);
  42. }
  43. h2 {
  44.     font: 1.45em 'Cinzel', serif;
  45.     font-weight: 400;
  46.     letter-spacing: 0.5em;
  47.     text-shadow: 0 0 25px rgba(254,254,255,0.85);
  48.     text-transform: lowercase;
  49. }
  51. [class^="letter"] {
  52.     -webkit-transition: opacity 3s ease;
  53.     -moz-transition: opacity 3s ease;
  54.     transition: opacity 3s ease;
  55. }
  56. .letter-0  { transition-delay: 0.2s; }
  57. .letter-1  { transition-delay: 0.4s; }
  58. .letter-2  { transition-delay: 0.6s; }
  59. .letter-3  { transition-delay: 0.8s; }
  60. .letter-4  { transition-delay: 1.0s; }
  61. .letter-5  { transition-delay: 1.2s; }
  62. .letter-6  { transition-delay: 1.4s; }
  63. .letter-7  { transition-delay: 1.6s; }
  64. .letter-8  { transition-delay: 1.8s; }
  65. .letter-9  { transition-delay: 2.0s; }
  66. .letter-10 { transition-delay: 2.2s; }
  67. .letter-11 { transition-delay: 2.4s; }
  68. .letter-12 { transition-delay: 2.6s; }
  69. .letter-13 { transition-delay: 2.8s; }
  70. .letter-14 { transition-delay: 3.0s; }
  72. h1, h2 {
  73.     visibility: hidden;
  74.     -webkit-transform: translate3d(0, 0, 0);
  75.     -moz-transform: translate3d(0, 0, 0);
  76.     transform: translate3d(0, 0, 0);
  77. }
  78. h1.transition-in,
  79. h2.transition-in {
  80.     visibility: visible;
  81. }
  82. h1 [class^="letter"],
  83. h2 [class^="letter"] {
  84.     opacity: 0;
  85. }
  86. h1.transition-in [class^="letter"],
  87. h2.transition-in [class^="letter"] {
  88.     opacity: 1;
  89. }
  91. #container {
  92. display: table;
  93. position: absolute;
  94. z-index: 20;
  95. width: 100%;
  96. height: 100%;
  97. text-align: center;
  98. cursor: none;
  99. left: 15px;
  100. }
  101. #container > div {
  102.     display: table-cell;
  103.     vertical-align: middle;
  104. }
  105. #container p {
  106.     position: absolute;
  107.     width: 100%;
  108.     left: 0;
  109.     bottom: 25px;
  110.     font-size: 0.8em;
  111.     letter-spacing: 0.1em;
  112.     font-weight: 300;
  113.     color: #76747a;
  114.     -webkit-font-smoothing: subpixel-antialiased;
  115.     font-smoothing: subpixel-antialiased;
  116. }
  117. #container p strong {
  118. color: #b3abc5;
  119. font-size: 5em;
  120. }
  121. #container p span {
  122.     font-size: 0.75em;
  123.     padding: 0 2px;
  124. }
  126. #canvas {
  127.     position: absolute;
  128.     z-index: 10;
  129.     top: 0;
  130.     left: 0;
  131.     width: 100%;
  132.     height: 100%;
  133.     cursor: none;
  134. }
  136. #stats {
  137.     position: absolute;
  138.     z-index: 10;
  139.     left: 10px;
  140.     top: 10px;
  141. }
  143. .dg.ac {
  144.     z-index: 100 !important;
  145. }
  147. #container div p strong a {
  148. color: #999;
  149. font-size: 0.5em;
  150. }
  151. body,td,th {
  152. font-family: Lato, sans-serif;
  153. }
  154. a:link {
  155. text-decoration: none;
  156. }
  157. a:visited {
  158. text-decoration: none;
  159. }
  160. a:hover {
  161. text-decoration: none;
  162. }
  163. a:active {
  164. text-decoration: none;
  165. }
  166. </style>
  167.  </head>
  168.  <body ondragstart="window.event.returnValue=false" oncontextmenu="window.event.returnValue=false" onselectstart="event.returnValue=false">
  169.   <div id="container">
  170.    <div>
  171.     <!--内容部分-->
  172.     <h1 id="h1">STGOD 只为改变世界</h1>
  173.     <h2 id="h2">分享的不仅是技术，互联网最后一片净土。</h2>
  174.     <p>&nbsp;</p>
  175.     <p><strong><a href="https://stgod.com">进入主站</a></strong></p>
  176.     <p>&nbsp;</p>
  177.     <p>&nbsp;</p>
  178.     <p>&nbsp;</p>
  179.     <p>&nbsp;</p>
  180.     <p>&nbsp;</p>
  181.    </div>
  182.   </div>
  183.   <canvas id="canvas"></canvas>
  184.   <audio autoplay="autoplay">
  185.   <!--背景音乐地址-->
  186.    <source src="http://7jpovv.com1.z0.glb.clouddn.com/The-Mass.mp3" type="audio/mpeg"></source>
  187.   </audio>
  188.   <script>
  189. 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()}}};
  190. </script>
  191.   <script>
  193. ;(function(window) {
  195. var ctx,
  196.     hue,
  197.     logo,
  198.     form,
  199.     buffer,
  200.     target = {},
  201.     tendrils = [],
  202.     settings = {};
  204. settings.debug = true;
  205. settings.friction = 0.5;
  206. settings.trails = 20;
  207. settings.size = 50;
  208. settings.dampening = 0.25;
  209. settings.tension = 0.98;
  211. Math.TWO_PI = Math.PI * 2;
  213. // ========================================================================================
  214. // Oscillator
  215. // ----------------------------------------------------------------------------------------
  217. function Oscillator(options) {
  218.     this.init(options || {});
  219. }
  221. Oscillator.prototype = (function() {
  223.     var value = 0;
  225.     return {
  227.         init: function(options) {
  228.             this.phase = options.phase || 0;
  229.             this.offset = options.offset || 0;
  230.             this.frequency = options.frequency || 0.001;
  231.             this.amplitude = options.amplitude || 1;
  232.         },
  234.         update: function() {
  235.             this.phase += this.frequency;
  236.             value = this.offset + Math.sin(this.phase) * this.amplitude;
  237.             return value;
  238.         },
  240.         value: function() {
  241.             return value;
  242.         }
  243.     };
  245. })();
  247. // ========================================================================================
  248. // Tendril
  249. // ----------------------------------------------------------------------------------------
  251. function Tendril(options) {
  252.     this.init(options || {});
  253. }
  255. Tendril.prototype = (function() {
  257.     function Node() {
  258.         this.x = 0;
  259.         this.y = 0;
  260.         this.vy = 0;
  261.         this.vx = 0;
  262.     }
  264.     return {
  266.         init: function(options) {
  268.             this.spring = options.spring + (Math.random() * 0.1) - 0.05;
  269.             this.friction = settings.friction + (Math.random() * 0.01) - 0.005;
  270.             this.nodes = [];
  272.             for(var i = 0, node; i < settings.size; i++) {
  274.                 node = new Node();
  275.                 node.x = target.x;
  276.                 node.y = target.y;
  278.                 this.nodes.push(node);
  279.             }
  280.         },
  282.         update: function() {
  284.             var spring = this.spring,
  285.                 node = this.nodes[0];
  287.             node.vx += (target.x - node.x) * spring;
  288.             node.vy += (target.y - node.y) * spring;
  290.             for(var prev, i = 0, n = this.nodes.length; i < n; i++) {
  292.                 node = this.nodes[i];
  294.                 if(i > 0) {
  296.                     prev = this.nodes[i - 1];
  298.                     node.vx += (prev.x - node.x) * spring;
  299.                     node.vy += (prev.y - node.y) * spring;
  300.                     node.vx += prev.vx * settings.dampening;
  301.                     node.vy += prev.vy * settings.dampening;
  302.                 }
  304.                 node.vx *= this.friction;
  305.                 node.vy *= this.friction;
  306.                 node.x += node.vx;
  307.                 node.y += node.vy;
  309.                 spring *= settings.tension;
  310.             }
  311.         },
  313.         draw: function() {
  315.             var x = this.nodes[0].x,
  316.                 y = this.nodes[0].y,
  317.                 a, b;
  319.             ctx.beginPath();
  320.             ctx.moveTo(x, y);
  322.             for(var i = 1, n = this.nodes.length - 2; i < n; i++) {
  324.                 a = this.nodes[i];
  325.                 b = this.nodes[i + 1];
  326.                 x = (a.x + b.x) * 0.5;
  327.                 y = (a.y + b.y) * 0.5;
  329.                 ctx.quadraticCurveTo(a.x, a.y, x, y);
  330.             }
  332.             a = this.nodes[i];
  333.             b = this.nodes[i + 1];
  335.             ctx.quadraticCurveTo(a.x, a.y, b.x, b.y);
  336.             ctx.stroke();
  337.             ctx.closePath();
  338.         }
  339.     };
  341. })();
  343. // ----------------------------------------------------------------------------------------
  345. function init(event) {
  347.     document.removeEventListener('mousemove', init);
  348.     document.removeEventListener('touchstart', init);
  350.     document.addEventListener('mousemove', mousemove);
  351.     document.addEventListener('touchmove', mousemove);
  352.     document.addEventListener('touchstart', touchstart);
  354.     mousemove(event);
  355.     reset();
  356.     loop();
  357. }
  359. function reset() {
  361.     tendrils = [];
  363.     for(var i = 0; i < settings.trails; i++) {
  365.         tendrils.push(new Tendril({
  366.             spring: 0.45 + 0.025 * (i / settings.trails)
  367.         }));
  368.     }
  369. }
  371. function loop() {
  373.     if(!ctx.running) return;
  375.     ctx.globalCompositeOperation = 'source-over';
  376.     ctx.fillStyle = 'rgba(8,5,16,0.4)';
  377.     ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  378.     ctx.globalCompositeOperation = 'lighter';
  379.     ctx.strokeStyle = 'hsla(' + Math.round(hue.update()) + ',90%,50%,0.25)';
  380.     ctx.lineWidth = 1;
  382.     if(ctx.frame % 60 == 0) {
  383.         console.log(hue.update(), Math.round(hue.update()), hue.phase, hue.offset, hue.frequency, hue.amplitude);
  384.     }
  386.     for(var i = 0, tendril; i < settings.trails; i++) {
  387.         tendril = tendrils[i];
  388.         tendril.update();
  389.         tendril.draw();
  390.     }
  392.     ctx.frame++;
  393.     ctx.stats.update();
  394.     requestAnimFrame(loop);
  395. }
  397. function resize() {
  398.     ctx.canvas.width = window.innerWidth;
  399.     ctx.canvas.height = window.innerHeight;
  400. }
  402. function start() {
  403.     if(!ctx.running) {
  404.         ctx.running = true;
  405.         loop();
  406.     }
  407. }
  409. function stop() {
  410.     ctx.running = false;
  411. }
  413. function mousemove(event) {
  414.     if(event.touches) {
  415.         target.x = event.touches[0].pageX;
  416.         target.y = event.touches[0].pageY;
  417.     } else {
  418.         target.x = event.clientX
  419.         target.y = event.clientY;
  420.     }
  421.     event.preventDefault();
  422. }
  424. function touchstart(event) {
  425.     if(event.touches.length == 1) {
  426.         target.x = event.touches[0].pageX;
  427.         target.y = event.touches[0].pageY;
  428.     }
  429. }
  431. function keyup(event) {
  433.     switch(event.keyCode) {
  434.         case 32:
  435.             save();
  436.             break;
  437.         default:
  438.             // console.log(event.keyCode);
  439.     }
  440. }
  442. function letters(id) {
  444.     var el = document.getElementById(id),
  445.         letters = el.innerHTML.replace('&amp;', '&').split(''),
  446.         heading = '';
  448.     for(var i = 0, n = letters.length, letter; i < n; i++) {
  449.         letter = letters[i].replace('&', '&amp');
  450.         heading += letter.trim() ? '<span class="letter-' + i + '">' + letter + '</span>' : '&nbsp;';
  451.     }
  453.     el.innerHTML = heading;
  454.     setTimeout(function() {
  455.         el.className = 'transition-in';
  456.     }, (Math.random() * 500) + 500);
  457. }
  459. function save() {
  461.     if(!buffer) {
  463.         buffer = document.createElement('canvas');
  464.         buffer.width = screen.availWidth;
  465.         buffer.height = screen.availHeight;
  466.         buffer.ctx = buffer.getContext('2d');
  468.         form = document.createElement('form');
  469.         form.method = 'post';
  470.         form.input = document.createElement('input');
  471.         form.input.type = 'hidden';
  472.         form.input.name = 'data';
  473.         form.appendChild(form.input);
  475.         document.body.appendChild(form);
  476.     }
  478.     buffer.ctx.fillStyle = 'rgba(8,5,16)';
  479.     buffer.ctx.fillRect(0, 0, buffer.width, buffer.height);
  481.     buffer.ctx.drawImage(canvas,
  482.         Math.round(buffer.width / 2 - canvas.width / 2),
  483.         Math.round(buffer.height / 2 - canvas.height / 2)
  484.     );
  486.     buffer.ctx.drawImage(logo,
  487.         Math.round(buffer.width / 2 - logo.width / 4),
  488.         Math.round(buffer.height / 2 - logo.height / 4),
  489.         logo.width / 2,
  490.         logo.height / 2
  491.     );
  493.     window.open(buffer.toDataURL(), 'wallpaper', 'top=0,left=0,width=' + buffer.width + ',height=' + buffer.height);
  495.     // form.input.value = buffer.toDataURL().substr(22);
  496.     // form.submit();
  497. }
  499. window.requestAnimFrame = (function() {
  500.     return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(fn) { window.setTimeout(fn, 1000 / 60) };
  501. })();
  503. window.onload = function() {
  505.     ctx = document.getElementById('canvas').getContext('2d');
  506.     ctx.stats = new Stats();
  507.     ctx.running = true;
  508.     ctx.frame = 1;
  510.     logo = new Image();
  511.     logo.src = '';
  513.     hue = new Oscillator({
  514.         phase: Math.random() * Math.TWO_PI,
  515.         amplitude: 85,
  516.         frequency: 0.0015,
  517.         offset: 285
  518.     });
  520.     letters('h1');
  521.     letters('h2');
  523.     document.addEventListener('mousemove', init);
  524.     document.addEventListener('touchstart', init);
  525.     document.body.addEventListener('orientationchange', resize);
  526.     window.addEventListener('resize', resize);
  527.     window.addEventListener('keyup', keyup);
  528.     window.addEventListener('focus', start);
  529.     window.addEventListener('blur', stop);
  531.     resize();
  533.     if(window.DEBUG) {
  535.         var gui = new dat.GUI();
  537.         // gui.add(settings, 'debug');
  538.         settings.gui.add(settings, 'trails', 1, 30).onChange(reset);
  539.         settings.gui.add(settings, 'size', 25, 75).onFinishChange(reset);
  540.         settings.gui.add(settings, 'friction', 0.45, 0.55).onFinishChange(reset);
  541.         settings.gui.add(settings, 'dampening', 0.01, 0.4).onFinishChange(reset);
  542.         settings.gui.add(settings, 'tension', 0.95, 0.999).onFinishChange(reset);
  544.         document.body.appendChild(ctx.stats.domElement);
  545.     }
  546. };
  548. })(window);
  550. </script>
  551.  </body>
  552. </html>

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

发表评论

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