完整代码|漂亮的引导页
时间：2024-07-19 04:09:48 阅读：1312
一个简单漂亮的完整引导页代码
Markup
<!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>
网友评论