完整代码|漂亮的引导页
时间:2024-07-19 04:09:48 阅读:1136
一个简单漂亮的完整引导页代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=11" id="mixia_vpid"> <title>游戏科技</title> <meta name="keywords" content="个人主页"> <meta name="description" content="个人引导页"> <link rel="icon" href="./favicon.ico"> <link rel="shortcut icon" href="./favicon.ico"> <link rel="stylesheet" type="text/css" href="./css/style.css"> </head> <body> <div class="content"> <div class="title">纵横游戏科技</div> <hr class="hr"> <div class="container"> <span id="hitokoto">6年老店-皇冠品质</span> </div> <script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script> <hr class="hr"> <nav class="cover-navigation cover-navigation--primary"> <ul class="navigation"> <li class="navigation__item"><a href="http://www.liangshengfaka.cn" target="_blank" title="待添加">购买安卓外挂</a></li> <li class="navigation__item"><a href="http://www.liangshengfaka.cn" target="_blank" title="待添加">购买苹果外挂</a></li> </ul> </nav> <!-- 版权信息,可修改,可删除,不强求 --> <div class="nav01_fooder">Copyright © <a href="/" rel="nofollow" target="_blank" title="ICP备案号">2024</a> | All Rights Reserved</div> </div> <div class="landscape"></div> <div class="filter"></div> <canvas id="canvas" width="1366" height="638"></canvas> <script> function Star(id, x, y) { this.id = id; this.x = x; this.y = y; this.r = Math.floor(Math.random() * 2) + 1; var alpha = (Math.floor(Math.random() * 10) + 1) / 10 / 2; this.color = "rgba(255,255,255," + alpha + ")"; } Star.prototype.draw = function() { ctx.fillStyle = this.color; ctx.shadowBlur = this.r * 2; ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fill(); } Star.prototype.move = function() { this.y -= .15; if (this.y <= -10) this.y = HEIGHT + 10; this.draw(); } Star.prototype.die = function() { stars[this.id] = null; delete stars[this.id]; } function Dot(id, x, y, r) { this.id = id; this.x = x; this.y = y; this.r = Math.floor(Math.random() * 5) + 1; this.maxLinks = 2; this.speed = .5; this.a = .5; this.aReduction = .005; this.color = "rgba(255,255,255," + this.a + ")"; this.linkColor = "rgba(255,255,255," + this.a / 4 + ")"; this.dir = Math.floor(Math.random() * 140) + 200; } Dot.prototype.draw = function() { ctx.fillStyle = this.color; ctx.shadowBlur = this.r * 2; ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fill(); } Dot.prototype.link = function() { if (this.id == 0) return; var previousDot1 = getPreviousDot(this.id, 1); var previousDot2 = getPreviousDot(this.id, 2); var previousDot3 = getPreviousDot(this.id, 3); if (!previousDot1) return; ctx.strokeStyle = this.linkColor; ctx.moveTo(previousDot1.x, previousDot1.y); ctx.beginPath(); ctx.lineTo(this.x, this.y); if (previousDot2 != false) ctx.lineTo(previousDot2.x, previousDot2.y); if (previousDot3 != false) ctx.lineTo(previousDot3.x, previousDot3.y); ctx.stroke(); ctx.closePath(); } function getPreviousDot(id, stepback) { if (id == 0 || id - stepback < 0) return false; if (typeof dots[id - stepback] != "undefined") return dots[id - stepback]; else return false; //getPreviousDot(id - stepback); } Dot.prototype.move = function() { this.a -= this.aReduction; if (this.a <= 0) { this.die(); return } this.color = "rgba(255,255,255," + this.a + ")"; this.linkColor = "rgba(255,255,255," + this.a / 4 + ")"; this.x = this.x + Math.cos(degToRad(this.dir)) * this.speed, this.y = this.y + Math.sin(degToRad(this.dir)) * this.speed; this.draw(); this.link(); } Dot.prototype.die = function() { dots[this.id] = null; delete dots[this.id]; } var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), WIDTH, HEIGHT, mouseMoving = false, mouseMoveChecker, mouseX, mouseY, stars = [], initStarsPopulation = 80, dots = [], dotsMinDist = 2, maxDistFromCursor = 50; setCanvasSize(); init(); function setCanvasSize() { WIDTH = document.documentElement.clientWidth, HEIGHT = document.documentElement.clientHeight; canvas.setAttribute("width", WIDTH); canvas.setAttribute("height", HEIGHT); } function init() { ctx.strokeStyle = "white"; ctx.shadowColor = "white"; for (var i = 0; i < initStarsPopulation; i++) { stars[i] = new Star(i, Math.floor(Math.random() * WIDTH), Math.floor(Math.random() * HEIGHT)); //stars[i].draw(); } ctx.shadowBlur = 0; animate(); } function animate() { ctx.clearRect(0, 0, WIDTH, HEIGHT); for (var i in stars) { stars[i].move(); } for (var i in dots) { dots[i].move(); } drawIfMouseMoving(); requestAnimationFrame(animate); } window.onmousemove = function(e) { mouseMoving = true; mouseX = e.clientX; mouseY = e.clientY; clearInterval(mouseMoveChecker); mouseMoveChecker = setTimeout(function() { mouseMoving = false; }, 100); } function drawIfMouseMoving() { if (!mouseMoving) return; if (dots.length == 0) { dots[0] = new Dot(0, mouseX, mouseY); dots[0].draw(); return; } var previousDot = getPreviousDot(dots.length, 1); var prevX = previousDot.x; var prevY = previousDot.y; var diffX = Math.abs(prevX - mouseX); var diffY = Math.abs(prevY - mouseY); if (diffX < dotsMinDist || diffY < dotsMinDist) return; var xVariation = Math.random() > .5 ? -1 : 1; xVariation = xVariation * Math.floor(Math.random() * maxDistFromCursor) + 1; var yVariation = Math.random() > .5 ? -1 : 1; yVariation = yVariation * Math.floor(Math.random() * maxDistFromCursor) + 1; dots[dots.length] = new Dot(dots.length, mouseX + xVariation, mouseY + yVariation); dots[dots.length - 1].draw(); dots[dots.length - 1].link(); } //setInterval(drawIfMouseMoving, 17); function degToRad(deg) { return deg * (Math.PI / 180); } </script> <style type="text/css"> html, body { margin: 0; overflow: hidden; width: 100%; height: 100%; background: black; background: linear-gradient(to bottom, #000000 0%, #5788fe 100%); font-family:'Questrial','Noto Serif SC' ; } .filter { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #fe5757; animation: colorChange 30s ease-in-out infinite; animation-fill-mode: both; mix-blend-mode: overlay; } @keyframes colorChange { 0%, 100% { opacity: 0; } 50% { opacity: .9; } } .landscape { position: absolute; bottom: 0px; left: 0; width: 100%; height: 100%; background-image: url(''); background-size: 1000px 250px; background-repeat: repeat-x; background-position: center bottom; } .content{ -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none; text-align: center; color: #fff; position: absolute; left: 50%; top: 45%; transform: translate(-50%,-50%); z-index:9999 } .content .title{ margin: 15px 0; font-size: 2.5em; letter-spacing: 4px; color: #FFF; } .content .hr{ width: 50%; margin: 20px auto; border: none; border-top: 1px solid rgba(255, 255, 255, 1); height: 1px; } .content .discription{ font-size: 20px; margin: 20px; } .cover-navigation { margin: 30px; } nav { display: inline-block; position: relative; } .navigation { display: inline-block; position: relative; margin: 0; list-style-type: none; } .navigation__item { display: inline-block; line-height: 1em; padding: 1em 0; } .navigation__item a { position: relative; color: #FFF; opacity: .8; transition: all .3s; padding: 10px 20px; border: 1px solid #fff; border-radius: 20px; font-size: .9em; font-weight: bold; letter-spacing: 1px; text-shadow: none; -webkit-font-smoothing: antialiased; text-decoration: none; } .navigation__item a:hover { color: #FFF; background: #FF7F00; border-color: #FF7F00; opacity: 1; transition: all .3s; } ol, ul { list-style: none; margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } .icp{ margin: 20px; } .icpnum{ color: #fff; text-decoration: none; } </style> </body> </html>
网友评论