欢迎光临
我们一直在努力着
        找回密码   

非常好看炫酷的html个人引导页源码分享

今天给大家分享一款非常好看炫酷的html单页源码,如果如下图
非常好看炫酷的html个人引导页源码分享-简论博客

html源码

!DOCTYPE html> <html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简论博客2021-6-28分享超炫酷个人引导html演示页面</title> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="http://www.bootcss.com/p/buttons/css/buttons.css"> <link rel="stylesheet" id="patternfly-adjusted-css" href="Css/app.css" type="text/css" media="all"> <link href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <script type="text/javascript" src="Scripts/jquery.js"></script> <script type="text/javascript" src="Scripts/bootstrap.min.js"></script> <style> #main article { border-bottom: none; } body{ font: 500 .875em PingFang SC,Lantinghei SC,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans; background-color: #07040e; } #canvas { position: absolute; z-index: 10; top: 0; left: 0; bottom: 0; right: 0; cursor: none; } .content{ position: absolute; z-index: 11; right: 0; left: 0; top: 0; bottom: 0; } .splash{ position: relative; } img#qq { width: 128px; background-size: cover; border-radius: 200px; box-shadow: 0px 0px 40px rgba(63, 81, 181, 0.72); border: 3px solid #00a0ff; opacity: 1; margin: 0 auto; margin-top: 20px; margin-bottom: 20px; transition: all 1.0s; } #qq:hover { box-shadow: 0 0 10px #fff; -webkit-box-shadow: 0 0 19px #fff; transform:rotate(360deg); -ms-transform:rotate(360deg); /* IE 9 */ -moz-transform:rotate(360deg); /* Firefox */ -webkit-transform:rotate(360deg); /* Safari 和 Chrome */ -o-transform:rotate(360deg); /* Opera */ filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } </style> </head> <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"> <div class="jumbotron" > <div class="container"> <div class="splash"> <div class="content"> <img src="picture/logo.jpg" alt="PatternFly logo" id="qq" class="wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;"> <h1 class="wow fadeIn animated" data-wow-delay="750ms" style="visibility: visible; animation-delay: 750ms; animation-name: fadeIn;"> 简论博客 - 引导页面演示 </h1> <p class="description wow fadeIn animated" data-wow-delay="1250ms" style="visibility: visible; animation-delay: 1250ms; animation-name: fadeIn;"> 勿忘初心 方得始终 精品分享 打造精品 </p> <a href="https://www.jlii.net/" class="button button-glow button-border button-rounded button-primary"><i class="fa fa-cloud"></i>简论博客</a>&nbsp&nbsp&nbsp&nbsp <a href="https://pan.iqianxing.vip/" class="button button-glow button-border button-rounded button-primary"><i class="fa fa-vimeo-square"></i>浅行云盘</a>&nbsp&nbsp&nbsp&nbsp <a href="https://www.iqianxing.vip/" class="button button-glow button-border button-rounded button-primary"><i class="fa fa-group"></i>浅行浅醉个人引导页</a>&nbsp&nbsp&nbsp&nbsp <a href="https://www.4hhh.cn/" class="button button-glow button-border button-rounded button-primary"><i class="fa fa-group"></i>四号导航网</a>&nbsp&nbsp&nbsp&nbsp <a href="/" class="button button-glow button-border button-rounded button-primary"><i class="fa fa-qq"></i>官方QQ群</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div style=" width: 100%; bottom: 30px; box-sizing: border-box; left: 0; ">© 2021 jlii.net . All Rights Reserved. </div> </div> </div> </div> <canvas id="canvas" ></canvas> <!-- <div id="particles-js"></div> --> </div>   <script src="Scripts/hovertreewelcome.js"></script> <script type="text/javascript"> // particlesJS('particles-js', // { // "particles": { // "number": { // "value": 110, // "density": { // "enable": true, // "value_area": 800 // } // }, // "color": { // "value": "#ffffff" // }, // "shape": { // "type": "circle", // "stroke": { // "width": 0, // "color": "#000000" // }, // "polygon": { // "nb_sides": 5 // }, // "image": { // "src": "img/github.svg", // "width": 100, // "height": 100 // } // }, // "opacity": { // "value": 0.5, // "random": false, // "anim": { // "enable": false, // "speed": 1, // "opacity_min": 0.1, // "sync": false // } // }, // "size": { // "value": 1, // "random": true, // "anim": { // "enable": false, // "speed": 20, // "size_min": 0.1, // "sync": false // } // }, // "line_linked": { // "enable": true, // "distance": 40, // "color": "#fff", // "opacity": 1, // "width": 1 // }, // "move": { // "enable": true, // "speed": 3, // "direction": "none", // "random": false, // "straight": false, // "out_mode": "out", // "attract": { // "enable": false, // "rotateX": 600, // "rotateY": 1200 // } // } // }, // "interactivity": { // "detect_on": "canvas", // "events": { // "onhover": { // "enable": true, // "mode": "grab" // }, // "onclick": { // "enable": true, // "mode": "push" // }, // "resize": true // }, // "modes": { // "grab": { // "distance": 120, // "line_linked": { // "opacity": 1 // } // }, // "bubble": { // "distance": 400, // "size": 40, // "duration": 2, // "opacity": 8, // "speed": 3 // }, // "repulse": { // "distance": 300 // }, // "push": { // "particles_nb": 4 // }, // "remove": { // "particles_nb": 2 // } // } // }, // "retina_detect": true, // "config_demo": { // "hide_card": false, // "background_color": "#b61924", // "background_image": "", // "background_position": "50% 50%", // "background_repeat": "no-repeat", // "background_size": "cover" // } // } // ); ; (function (window) { var ctx, hue, logo, form, buffer, target = {}, tendrils = [], settings = {}; settings.debug = true; settings.friction = 0.5; settings.trails = 20; settings.size = 50; settings.dampening = 0.25; settings.tension = 0.98; Math.TWO_PI = Math.PI * 2; // ======================================================================================== // Oscillator 何问起 // ---------------------------------------------------------------------------------------- function Oscillator(options) { this.init(options || {}); } Oscillator.prototype = (function () { var value = 0; return { init: function (options) { this.phase = options.phase || 0; this.offset = options.offset || 0; this.frequency = options.frequency || 0.001; this.amplitude = options.amplitude || 1; }, update: function () { this.phase += this.frequency; value = this.offset + Math.sin(this.phase) * this.amplitude; return value; }, value: function () { return value; } }; })(); // ======================================================================================== // Tendril hovertree.com // ---------------------------------------------------------------------------------------- function Tendril(options) { this.init(options || {}); } Tendril.prototype = (function () { function Node() { this.x = 0; this.y = 0; this.vy = 0; this.vx = 0; } return { init: function (options) { this.spring = options.spring + (Math.random() * 0.1) - 0.05; this.friction = settings.friction + (Math.random() * 0.01) - 0.005; this.nodes = []; for (var i = 0, node; i < settings.size; i++) { node = new Node(); node.x = target.x; node.y = target.y; this.nodes.push(node); } }, update: function () { var spring = this.spring, node = this.nodes[0]; node.vx += (target.x - node.x) * spring; node.vy += (target.y - node.y) * spring; for (var prev, i = 0, n = this.nodes.length; i < n; i++) { node = this.nodes[i]; if (i > 0) { prev = this.nodes[i - 1]; node.vx += (prev.x - node.x) * spring; node.vy += (prev.y - node.y) * spring; node.vx += prev.vx * settings.dampening; node.vy += prev.vy * settings.dampening; } node.vx *= this.friction; node.vy *= this.friction; node.x += node.vx; node.y += node.vy; spring *= settings.tension; } }, draw: function () { var x = this.nodes[0].x, y = this.nodes[0].y, a, b; ctx.beginPath(); ctx.moveTo(x, y); for (var i = 1, n = this.nodes.length - 2; i < n; i++) { a = this.nodes[i]; b = this.nodes[i + 1]; x = (a.x + b.x) * 0.5; y = (a.y + b.y) * 0.5; ctx.quadraticCurveTo(a.x, a.y, x, y); } a = this.nodes[i]; b = this.nodes[i + 1]; ctx.quadraticCurveTo(a.x, a.y, b.x, b.y); ctx.stroke(); ctx.closePath(); } }; })(); // ---------------------------------------------------------------------------------------- function init(event) { document.removeEventListener('mousemove', init); document.removeEventListener('touchstart', init); document.addEventListener('mousemove', mousemove); document.addEventListener('touchmove', mousemove); document.addEventListener('touchstart', touchstart); mousemove(event); reset(); loop(); } function reset() { tendrils = []; for (var i = 0; i < settings.trails; i++) { tendrils.push(new Tendril({ spring: 0.45 + 0.025 * (i / settings.trails) })); } } function loop() { if (!ctx.running) return; ctx.globalCompositeOperation = 'source-over'; ctx.fillStyle = 'rgba(8,5,16,0.4)'; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.globalCompositeOperation = 'lighter'; ctx.strokeStyle = 'hsla(' + Math.round(hue.update()) + ',90%,50%,0.25)'; ctx.lineWidth = 1; if (ctx.frame % 60 == 0) { console.log(hue.update(), Math.round(hue.update()), hue.phase, hue.offset, hue.frequency, hue.amplitude); } for (var i = 0, tendril; i < settings.trails; i++) { tendril = tendrils[i]; tendril.update(); tendril.draw(); } ctx.frame++; ctx.stats.update(); requestAnimFrame(loop); } function resize() { ctx.canvas.width = window.innerWidth-20; ctx.canvas.height = window.innerHeight+100; } function start() { if (!ctx.running) { ctx.running = true; loop(); } } function stop() { ctx.running = false; } function mousemove(event) { if (event.touches) { target.x = event.touches[0].pageX; target.y = event.touches[0].pageY; } else { target.x = event.clientX target.y = event.clientY; } event.preventDefault(); } function touchstart(event) { if (event.touches.length == 1) { target.x = event.touches[0].pageX; target.y = event.touches[0].pageY; } } function keyup(event) { switch (event.keyCode) { case 32: save(); break; default: // console.log(event.keyCode); hovertree.com } } function letters(id) { var el = document.getElementById(id), letters = el.innerHTML.replace('&amp;', '&').split(''), heading = ''; for (var i = 0, n = letters.length, letter; i < n; i++) { letter = letters[i].replace('&', '&amp'); heading += letter.trim() ? '<span class="letter-' + i + '">' + letter + '</span>' : '&nbsp;'; } el.innerHTML = heading; setTimeout(function () { el.className = 'transition-in'; }, (Math.random() * 500) + 500); } function save() { if (!buffer) { buffer = document.createElement('canvas'); buffer.width = screen.availWidth; buffer.height = screen.availHeight; buffer.ctx = buffer.getContext('2d'); form = document.createElement('form'); form.method = 'post'; form.input = document.createElement('input'); form.input.type = 'hidden'; form.input.name = 'data'; form.appendChild(form.input); document.body.appendChild(form); } buffer.ctx.fillStyle = 'rgba(8,5,16)'; buffer.ctx.fillRect(0, 0, buffer.width, buffer.height); buffer.ctx.drawImage(canvas, Math.round(buffer.width / 2 - canvas.width / 2), Math.round(buffer.height / 2 - canvas.height / 2) ); buffer.ctx.drawImage(logo, Math.round(buffer.width / 2 - logo.width / 4), Math.round(buffer.height / 2 - logo.height / 4), logo.width / 2, logo.height / 2 ); window.open(buffer.toDataURL(), 'wallpaper', 'top=0,left=0,width=' + buffer.width + ',height=' + buffer.height); // form.input.value = buffer.toDataURL().substr(22); // form.submit(); hovertree.com } window.requestAnimFrame = (function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (fn) { window.setTimeout(fn, 1000 / 60) }; })(); window.onload = function () { ctx = document.getElementById('canvas').getContext('2d'); ctx.stats = new Stats(); ctx.running = true; ctx.frame = 1;   hue = new Oscillator({ phase: Math.random() * Math.TWO_PI, amplitude: 85, frequency: 0.0015, offset: 285 });   document.addEventListener('mousemove', init); document.addEventListener('touchstart', init); document.body.addEventListener('orientationchange', resize); window.addEventListener('resize', resize); window.addEventListener('keyup', keyup); window.addEventListener('focus', start); window.addEventListener('blur', stop); resize(); if (window.DEBUG) { var gui = new dat.GUI(); // gui.add(settings, 'debug'); settings.gui.add(settings, 'trails', 1, 30).onChange(reset); settings.gui.add(settings, 'size', 25, 75).onFinishChange(reset); settings.gui.add(settings, 'friction', 0.45, 0.55).onFinishChange(reset); settings.gui.add(settings, 'dampening', 0.01, 0.4).onFinishChange(reset); settings.gui.add(settings, 'tension', 0.95, 0.999).onFinishChange(reset); document.body.appendChild(ctx.stats.domElement); } }; })(window); </script> </body> </html>

源码下载

输入验证码查看隐藏内容:
扫描下方二维码关注本站微信公众号或在微信里搜索ljcckj关注后在对话框 回复 获取验证码 获取下载地址
非常好看炫酷的html个人引导页源码分享-简论博客
赞(4) 打赏
版权声明:本文采用知识共享 署名4.0国际许可协议 BY-NC-SA 进行授权
文章名称:《非常好看炫酷的html个人引导页源码分享
文章链接:https://www.jlii.net/1935.html
免责声明:本站为个人博客,所有软件信息均来自网络,您必须在下载后的24个小时之内从您的电脑中彻底删除上述内容;版权争议与本站无关,所有资源仅供学习参考研究目的,如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担,如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
本站为非盈利性站点,并不贩卖软件,不存在任何商业目的及用途,网站会员捐赠是您喜欢本站而产生的赞助支持行为,仅为维持服务器的开支与维护,全凭自愿无任何强求。
分享到: 更多 (0)

说两句 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

当前页面在线人数:5 人

访客刷新页面后重新计时!

在线列表:

3.234.211.61 => 剩余失效时间: 600 秒
106.11.158.35 => 剩余失效时间: 283 秒
110.249.201.132 => 剩余失效时间: 394 秒
207.46.13.171 => 剩余失效时间: 553 秒
47.104.136.57,119.188.195.163,116.129.251.77 => 剩余失效时间: 560 秒