分享一款漂亮的html引导页,移动端自适应,鼠标滑过特效

向宇峰 发表于 2016-12-25 15:24:21 | 查看: 3626 | 回复: 1
QQ截图20161225152015.png


演示网站:http://www.hc173.com


  1. <!DOCTYPE html>
  2. <html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>≡皇城メ不滅神話≡网游公会 Www.Hc173.Com 十年皇城 不见不散</title>
  8.   <meta name="keywords" content="皇城网游公会,皇城不灭神话,游戏社区" />
  9.   <meta name="description" content="皇城不灭神话网游公会是一个以征途SF起步的大型网络游戏公会,曾经是中国征途SF界最大的家族,后转型做网络游戏社区。迄今为止已有10年历史,是国内最老的网游公会之一。" />
  10.   <link rel="shortcut icon" href="favicon.ico">
  11.   <link rel="stylesheet" id="patternfly-adjusted-css" href="Css/app.css"
  12.   type="text/css" media="all">
  13.   <script type="text/javascript" src="Scripts/jquery.js"></script>
  14.   <script type="text/javascript" src="Scripts/bootstrap.min.js"></script>

  15.   <style>
  16.     #main article { border-bottom: none; }
  17.         body{
  18.                     font: 500 .875em PingFang SC,Lantinghei SC,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans;
  19.         background-color: #07040e;
  20.         }
  21.   #canvas {
  22.                 position: absolute;
  23.     z-index: 10;
  24.     top: 0;
  25.     left: 0;
  26.     bottom: 0;
  27.     right: 0;
  28.     cursor: none;
  29.         }
  30.         .content{
  31.       position: absolute;
  32.     z-index: 11;
  33.     right: 0;
  34.     left: 0;
  35.     top: 0;
  36.     bottom: 0;
  37. }
  38. .splash{
  39.   position: relative;
  40.   }
  41.   </style>

  42.   
  43. </head>
  44. <body class="home page page-id-194 page-template page-template-page-homepage page-template-page-homepage-php custom-background" ondragstart="window.event.returnValue=false" oncontextmenu="window.event.returnValue=false" onselectstart="event.returnValue=false">
  45.   <header role="banner">
  46.     <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  47.       <div class="container">
  48.         <div class="navbar-header">
  49.           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  50.             <span class="icon-bar">
  51.             </span>
  52.             <span class="icon-bar">
  53.             </span>
  54.             <span class="icon-bar">
  55.             </span>
  56.           </button>
  57.           <a class="navbar-brand" id="logo" title="皇城不灭神话" href="http://www.hc173.com/">
  58.            皇城官网
  59.           </a>
  60.         </div>
  61.         <!-- end .navbar-header -->
  62.         <div class="navbar-collapse collapse">
  63.           <ul id="menu-primary" class="nav navbar-nav navbar-right">
  64.          
  65.             <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown">
  66.               <a href="http://bbs.hc173.com/" class="dropdown-toggle" target="_blank">
  67.                 论坛
  68.               </a>
  69.             </li>

  70.             
  71.                
  72.               
  73.       
  74.           </ul>
  75.         </div>
  76.         <!-- end .navbar-collapse -->
  77.       </div>
  78.       <!-- end .container -->
  79.     </nav>
  80.     <!-- end .navbar -->
  81.   </header>
  82.   <!-- end header -->
  83.   <div class="jumbotron">
  84.     <div class="container">
  85.       <div class="splash">
  86.         <div class="content">
  87.           <a href="http://bbs.hc173.com/" target="_blank"> <img src="Picture/3.png" alt="PatternFly logo" class="wow fadeInDown animated"
  88.           style="visibility: visible; animation-name: fadeInDown;"></a>
  89.           <h1 class="wow fadeIn animated" data-wow-delay="750ms" style="visibility: visible; animation-delay: 750ms; animation-name: fadeIn;">
  90.             ≡皇城メ不滅神話≡
  91.           </h1>
  92.                   <p>
  93.                    <p data-wow-delay="1250ms" style="visibility: visible; animation-delay: 1250ms; animation-name: fadeIn;">
  94.                   2017年08月25日
  95.                    </p>
  96.           <p class="description wow fadeIn animated" data-wow-delay="1250ms" style="visibility: visible; animation-delay: 1250ms; animation-name: fadeIn;">
  97.             十年皇城 不见不散
  98.           </p>
  99.                   
  100.                   <div style="position: fixed;width: 100%;bottom: 30px;box-sizing: border-box;left: 0;">浙ICP备13033857号</div>
  101.         </div>
  102.       </div>
  103.     </div>
  104.   <canvas id="canvas" width="1659" height="425"></canvas>
  105.   <!-- <div id="particles-js"></div> -->
  106.   
  107.   </div>




  108. <script src="Scripts/hovertreewelcome.js"></script>
  109. <script type="text/javascript">

  110. // particlesJS('particles-js',
  111. //   {
  112. //     "particles": {
  113. //       "number": {
  114. //         "value": 110,
  115. //         "density": {
  116. //           "enable": true,
  117. //           "value_area": 800
  118. //         }
  119. //       },
  120. //       "color": {
  121. //         "value": "#ffffff"
  122. //       },
  123. //       "shape": {
  124. //         "type": "circle",
  125. //         "stroke": {
  126. //           "width": 0,
  127. //           "color": "#000000"
  128. //         },
  129. //         "polygon": {
  130. //           "nb_sides": 5
  131. //         },
  132. //         "image": {
  133. //           "src": "img/github.svg",
  134. //           "width": 100,
  135. //           "height": 100
  136. //         }
  137. //       },
  138. //       "opacity": {
  139. //         "value": 0.5,
  140. //         "random": false,
  141. //         "anim": {
  142. //           "enable": false,
  143. //           "speed": 1,
  144. //           "opacity_min": 0.1,
  145. //           "sync": false
  146. //         }
  147. //       },
  148. //       "size": {
  149. //         "value": 1,
  150. //         "random": true,
  151. //         "anim": {
  152. //           "enable": false,
  153. //           "speed": 20,
  154. //           "size_min": 0.1,
  155. //           "sync": false
  156. //         }
  157. //       },
  158. //       "line_linked": {
  159. //         "enable": true,
  160. //         "distance": 40,
  161. //         "color": "#fff",
  162. //         "opacity": 1,
  163. //         "width": 1
  164. //       },
  165. //       "move": {
  166. //         "enable": true,
  167. //         "speed": 3,
  168. //         "direction": "none",
  169. //         "random": false,
  170. //         "straight": false,
  171. //         "out_mode": "out",
  172. //         "attract": {
  173. //           "enable": false,
  174. //           "rotateX": 600,
  175. //           "rotateY": 1200
  176. //         }
  177. //       }
  178. //     },
  179. //     "interactivity": {
  180. //       "detect_on": "canvas",
  181. //       "events": {
  182. //         "onhover": {
  183. //           "enable": true,
  184. //           "mode": "grab"
  185. //         },
  186. //         "onclick": {
  187. //           "enable": true,
  188. //           "mode": "push"
  189. //         },
  190. //         "resize": true
  191. //       },
  192. //       "modes": {
  193. //         "grab": {
  194. //           "distance": 120,
  195. //           "line_linked": {
  196. //             "opacity": 1
  197. //           }
  198. //         },
  199. //         "bubble": {
  200. //           "distance": 400,
  201. //           "size": 40,
  202. //           "duration": 2,
  203. //           "opacity": 8,
  204. //           "speed": 3
  205. //         },
  206. //         "repulse": {
  207. //           "distance": 300
  208. //         },
  209. //         "push": {
  210. //           "particles_nb": 4
  211. //         },
  212. //         "remove": {
  213. //           "particles_nb": 2
  214. //         }
  215. //       }
  216. //     },
  217. //     "retina_detect": true,
  218. //     "config_demo": {
  219. //       "hide_card": false,
  220. //       "background_color": "#b61924",
  221. //       "background_image": "",
  222. //       "background_position": "50% 50%",
  223. //       "background_repeat": "no-repeat",
  224. //       "background_size": "cover"
  225. //     }
  226. //   }

  227. // );


  228.         ; (function (window) {

  229.             var ctx,
  230.                 hue,
  231.                 logo,
  232.                 form,
  233.                 buffer,
  234.                 target = {},
  235.                 tendrils = [],
  236.                 settings = {};

  237.             settings.debug = true;
  238.             settings.friction = 0.5;
  239.             settings.trails = 20;
  240.             settings.size = 50;
  241.             settings.dampening = 0.25;
  242.             settings.tension = 0.98;

  243.             Math.TWO_PI = Math.PI * 2;

  244.             // ========================================================================================
  245.             // Oscillator 何问起
  246.             // ----------------------------------------------------------------------------------------

  247.             function Oscillator(options) {
  248.                 this.init(options || {});
  249.             }

  250.             Oscillator.prototype = (function () {

  251.                 var value = 0;

  252.                 return {

  253.                     init: function (options) {
  254.                         this.phase = options.phase || 0;
  255.                         this.offset = options.offset || 0;
  256.                         this.frequency = options.frequency || 0.001;
  257.                         this.amplitude = options.amplitude || 1;
  258.                     },

  259.                     update: function () {
  260.                         this.phase += this.frequency;
  261.                         value = this.offset + Math.sin(this.phase) * this.amplitude;
  262.                         return value;
  263.                     },

  264.                     value: function () {
  265.                         return value;
  266.                     }
  267.                 };

  268.             })();

  269.             // ========================================================================================
  270.             // Tendril hovertree.com
  271.             // ----------------------------------------------------------------------------------------

  272.             function Tendril(options) {
  273.                 this.init(options || {});
  274.             }

  275.             Tendril.prototype = (function () {

  276.                 function Node() {
  277.                     this.x = 0;
  278.                     this.y = 0;
  279.                     this.vy = 0;
  280.                     this.vx = 0;
  281.                 }

  282.                 return {

  283.                     init: function (options) {

  284.                         this.spring = options.spring + (Math.random() * 0.1) - 0.05;
  285.                         this.friction = settings.friction + (Math.random() * 0.01) - 0.005;
  286.                         this.nodes = [];

  287.                         for (var i = 0, node; i < settings.size; i++) {

  288.                             node = new Node();
  289.                             node.x = target.x;
  290.                             node.y = target.y;

  291.                             this.nodes.push(node);
  292.                         }
  293.                     },

  294.                     update: function () {

  295.                         var spring = this.spring,
  296.                             node = this.nodes[0];

  297.                         node.vx += (target.x - node.x) * spring;
  298.                         node.vy += (target.y - node.y) * spring;

  299.                         for (var prev, i = 0, n = this.nodes.length; i < n; i++) {

  300.                             node = this.nodes[i];

  301.                             if (i > 0) {

  302.                                 prev = this.nodes[i - 1];

  303.                                 node.vx += (prev.x - node.x) * spring;
  304.                                 node.vy += (prev.y - node.y) * spring;
  305.                                 node.vx += prev.vx * settings.dampening;
  306.                                 node.vy += prev.vy * settings.dampening;
  307.                             }

  308.                             node.vx *= this.friction;
  309.                             node.vy *= this.friction;
  310.                             node.x += node.vx;
  311.                             node.y += node.vy;

  312.                             spring *= settings.tension;
  313.                         }
  314.                     },

  315.                     draw: function () {

  316.                         var x = this.nodes[0].x,
  317.                             y = this.nodes[0].y,
  318.                             a, b;

  319.                         ctx.beginPath();
  320.                         ctx.moveTo(x, y);

  321.                         for (var i = 1, n = this.nodes.length - 2; i < n; i++) {

  322.                             a = this.nodes[i];
  323.                             b = this.nodes[i + 1];
  324.                             x = (a.x + b.x) * 0.5;
  325.                             y = (a.y + b.y) * 0.5;

  326.                             ctx.quadraticCurveTo(a.x, a.y, x, y);
  327.                         }

  328.                         a = this.nodes[i];
  329.                         b = this.nodes[i + 1];

  330.                         ctx.quadraticCurveTo(a.x, a.y, b.x, b.y);
  331.                         ctx.stroke();
  332.                         ctx.closePath();
  333.                     }
  334.                 };

  335.             })();

  336.             // ----------------------------------------------------------------------------------------

  337.             function init(event) {

  338.                 document.removeEventListener('mousemove', init);
  339.                 document.removeEventListener('touchstart', init);

  340.                 document.addEventListener('mousemove', mousemove);
  341.                 document.addEventListener('touchmove', mousemove);
  342.                 document.addEventListener('touchstart', touchstart);

  343.                 mousemove(event);
  344.                 reset();
  345.                 loop();
  346.             }

  347.             function reset() {

  348.                 tendrils = [];

  349.                 for (var i = 0; i < settings.trails; i++) {

  350.                     tendrils.push(new Tendril({
  351.                         spring: 0.45 + 0.025 * (i / settings.trails)
  352.                     }));
  353.                 }
  354.             }

  355.             function loop() {

  356.                 if (!ctx.running) return;

  357.                 ctx.globalCompositeOperation = 'source-over';
  358.                 ctx.fillStyle = 'rgba(8,5,16,0.4)';
  359.                 ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  360.                 ctx.globalCompositeOperation = 'lighter';
  361.                 ctx.strokeStyle = 'hsla(' + Math.round(hue.update()) + ',90%,50%,0.25)';
  362.                 ctx.lineWidth = 1;

  363.                 if (ctx.frame % 60 == 0) {
  364.                     console.log(hue.update(), Math.round(hue.update()), hue.phase, hue.offset, hue.frequency, hue.amplitude);
  365.                 }

  366.                 for (var i = 0, tendril; i < settings.trails; i++) {
  367.                     tendril = tendrils[i];
  368.                     tendril.update();
  369.                     tendril.draw();
  370.                 }

  371.                 ctx.frame++;
  372.                 ctx.stats.update();
  373.                 requestAnimFrame(loop);
  374.             }

  375.             function resize() {
  376.                 ctx.canvas.width = window.innerWidth;
  377.                 ctx.canvas.height = window.innerHeight;
  378.             }

  379.             function start() {
  380.                 if (!ctx.running) {
  381.                     ctx.running = true;
  382.                     loop();
  383.                 }
  384.             }

  385.             function stop() {
  386.                 ctx.running = false;
  387.             }

  388.             function mousemove(event) {
  389.                 if (event.touches) {
  390.                     target.x = event.touches[0].pageX;
  391.                     target.y = event.touches[0].pageY;
  392.                 } else {
  393.                     target.x = event.clientX
  394.                     target.y = event.clientY;
  395.                 }
  396.                 event.preventDefault();
  397.             }

  398.             function touchstart(event) {
  399.                 if (event.touches.length == 1) {
  400.                     target.x = event.touches[0].pageX;
  401.                     target.y = event.touches[0].pageY;
  402.                 }
  403.             }

  404.             function keyup(event) {

  405.                 switch (event.keyCode) {
  406.                     case 32:
  407.                         save();
  408.                         break;
  409.                     default:
  410.                         // console.log(event.keyCode); hovertree.com
  411.                 }
  412.             }

  413.             function letters(id) {

  414.                 var el = document.getElementById(id),
  415.                     letters = el.innerHTML.replace('&', '&').split(''),
  416.                     heading = '';

  417.                 for (var i = 0, n = letters.length, letter; i < n; i++) {
  418.                     letter = letters[i].replace('&', '&');
  419.                     heading += letter.trim() ? '<span class="letter-' + i + '">' + letter + '</span>' : ' ';
  420.                 }

  421.                 el.innerHTML = heading;
  422.                 setTimeout(function () {
  423.                     el.className = 'transition-in';
  424.                 }, (Math.random() * 500) + 500);
  425.             }

  426.             function save() {

  427.                 if (!buffer) {

  428.                     buffer = document.createElement('canvas');
  429.                     buffer.width = screen.availWidth;
  430.                     buffer.height = screen.availHeight;
  431.                     buffer.ctx = buffer.getContext('2d');

  432.                     form = document.createElement('form');
  433.                     form.method = 'post';
  434.                     form.input = document.createElement('input');
  435.                     form.input.type = 'hidden';
  436.                     form.input.name = 'data';
  437.                     form.appendChild(form.input);

  438.                     document.body.appendChild(form);
  439.                 }

  440.                 buffer.ctx.fillStyle = 'rgba(8,5,16)';
  441.                 buffer.ctx.fillRect(0, 0, buffer.width, buffer.height);

  442.                 buffer.ctx.drawImage(canvas,
  443.                     Math.round(buffer.width / 2 - canvas.width / 2),
  444.                     Math.round(buffer.height / 2 - canvas.height / 2)
  445.                 );

  446.                 buffer.ctx.drawImage(logo,
  447.                     Math.round(buffer.width / 2 - logo.width / 4),
  448.                     Math.round(buffer.height / 2 - logo.height / 4),
  449.                     logo.width / 2,
  450.                     logo.height / 2
  451.                 );

  452.                 window.open(buffer.toDataURL(), 'wallpaper', 'top=0,left=0,width=' + buffer.width + ',height=' + buffer.height);

  453.                 // form.input.value = buffer.toDataURL().substr(22);
  454.                 // form.submit(); hovertree.com
  455.             }

  456.             window.requestAnimFrame = (function () {
  457.                 return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (fn) { window.setTimeout(fn, 1000 / 60) };
  458.             })();

  459.             window.onload = function () {

  460.                 ctx = document.getElementById('canvas').getContext('2d');
  461.                 ctx.stats = new Stats();
  462.                 ctx.running = true;
  463.                 ctx.frame = 1;

  464.                

  465.                 hue = new Oscillator({
  466.                     phase: Math.random() * Math.TWO_PI,
  467.                     amplitude: 85,
  468.                     frequency: 0.0015,
  469.                     offset: 285
  470.                 });

  471.             

  472.                 document.addEventListener('mousemove', init);
  473.                 document.addEventListener('touchstart', init);
  474.                 document.body.addEventListener('orientationchange', resize);
  475.                 window.addEventListener('resize', resize);
  476.                 window.addEventListener('keyup', keyup);
  477.                 window.addEventListener('focus', start);
  478.                 window.addEventListener('blur', stop);

  479.                 resize();

  480.                 if (window.DEBUG) {

  481.                     var gui = new dat.GUI();

  482.                     // gui.add(settings, 'debug');
  483.                     settings.gui.add(settings, 'trails', 1, 30).onChange(reset);
  484.                     settings.gui.add(settings, 'size', 25, 75).onFinishChange(reset);
  485.                     settings.gui.add(settings, 'friction', 0.45, 0.55).onFinishChange(reset);
  486.                     settings.gui.add(settings, 'dampening', 0.01, 0.4).onFinishChange(reset);
  487.                     settings.gui.add(settings, 'tension', 0.95, 0.999).onFinishChange(reset);

  488.                     document.body.appendChild(ctx.stats.domElement);
  489.                 }
  490.             };

  491.         })(window);
  492.     </script>
  493. </body>
  494. </html>
复制代码

源码HTML,CSS,JS下载:

hc173.zip (316.32 KB, 下载次数: 562)

收藏 回复 显示全部楼层 道具 举报

匿名  发表于 2016-12-28 09:44:52
666拿走了。正好需要一个引导页,谢谢博主。

回复 道具

访客可直接回复,无需注册!
高级模式
B Color Image Link Quote Code Smilies @朋友

楼主 : 向宇峰

  • 收听TA
  • 加好友
  • 发消息
  • 打招呼
关注微信订阅号
    部分文章将会更新至微信订阅号
    微信添加好友搜索:xyfeng168
    或扫描下面二维码
    微信二维码
一直专注于网站优化 - 网络推广 - 网络营销 - 微信运营 - 网站建设

Copyright © 2013 向宇峰博客 版权所有
浙ICP备13033857号

返回顶部