梦想创造可能,敢于想象,敢于创造。炫酷黑色系列 HTML 源码,主页源码,引导页,html 源码

zhuye.gif

# index

index 部分就比较简单了,很直接就行,参考标签代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html lang="en"> 
<head>
<meta charset="UTF-8">
<title>六星虚拟网络</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico" type="images/x-icon">
</head>
<body>
<div class="centerBox">
<div class="header"></div>
<div class="center-list">
<div class="centerBody">
<img src="img/ds.png" />
<p class="btn-p">

<a href="https://hy6xing.cn/" target="_blank" title="博客">进入博客空间</a>

</p>
<p class="txt-w"><font style="color: #ffffff;font-size:12px;letter-spacing: 11px;font-weight: 100;padding-left: 20px;">敢于想象&nbsp;&nbsp;敢于创造</font></p>
</div>
</div>
<div class="footer">
<div class="center-footer">
<p class="banquan"> 粤ICP备12009483号-9 Copyright © <a href="https://hy6xing.cn/" target="_blank" title="六星虚拟网络">零躺躺&夜灵</a> All Rights Reserved</div>
</div>
</div>
</div>
</body>
<script src='js/simplex-noise.min.js'></script>
<script src="js/index.js"></script>
</html>

# css

当然,光这些是不够的,css 部分如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
html,
body {
background: black;
position: relative;
width: 100%;
height: 100%;
}

.centerBox {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
color: white;
}
.center-list{
width: 70%;
margin: 0 15%;
}
.centerBody{
width: 100%;
text-align: center;
margin-top: 25%;
}
.centerBody img{
margin: 0 auto;
}
.btn-p{
margin-top: 30px;
margin-bottom: 30px;
}
.btn-p a{
font-size: 14px;
color: #FFFFFF;
padding: 8px 30px;
border-radius:30px;
margin: 0 10px;
background: rgba(29, 29, 29, 0.5);
border:1px solid rgba(89, 129, 183, 0.2);
}
.btn-p a:hover{
color: #FFFFFF;
background: -webkit-linear-gradient(left, #19c3ff, #0093ff);
background: -o-linear-gradient(left, #19c3ff, #0093ff);
background: -moz-linear-gradient(left, #19c3ff, #0093ff);
background: linear-gradient(left, #19c3ff, #0093ff);
}
.footer{
position: fixed;
bottom: 20px;
width: 100%;
}
.center-footer{
width: 70%;
margin: 0 15%;
}
.footer .banquan{
text-align: center;
font-size: 12px;
color: #6a7179;
}
@media screen and (max-width: 950px) {

.centerBody{
margin-top: 55%;
}
.centerBody img{
width: 100%;
}
.center-list {
width: 90%;
margin: 0 5%;
}
}

# javascript

除此之外,还须补充 js 部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
"use strict";var

PI = Math.PI,cos = Math.cos,sin = Math.sin,abs = Math.abs,sqrt = Math.sqrt,pow = Math.pow,floor = Math.floor,round = Math.round,random = Math.random,atan2 = Math.atan2;
var HALF_PI = 0.5 * PI;
var TAU = 2 * PI;
var TO_RAD = PI / 180;
var rand = function rand(n) {return n * random();};
var randIn = function randIn(min, max) {return rand(max - min) + min;};
var randRange = function randRange(n) {return n - rand(2 * n);};
var fadeIn = function fadeIn(t, m) {return t / m;};
var fadeOut = function fadeOut(t, m) {return (m - t) / m;};
var fadeInOut = function fadeInOut(t, m) {
var hm = 0.5 * m;
return abs((t + hm) % m - hm) / hm;
};
var dist = function dist(x1, y1, x2, y2) {return sqrt(pow(x2 - x1, 2) + pow(y2 - y1, 2));};
var angle = function angle(x1, y1, x2, y2) {return atan2(y2 - y1, x2 - x1);};
var lerp = function lerp(n1, n2, speed) {return (1 - speed) * n1 + speed * n2;};

var particleCount = 1000;
var spawnRadius = 100;
var noiseSteps = 6;

var canvas = void 0;
var ctx = void 0;
var center = void 0;
var tick = void 0;
var simplex = void 0;
var positions = void 0;
var velocities = void 0;
var lifeSpans = void 0;
var sizes = void 0;
var hues = void 0;
var speeds = void 0;

function setup() {
tick = 0;
center = [];
createCanvas();
createParticles();
draw();
}

function createParticles() {
simplex = new SimplexNoise();
positions = new Float32Array(particleCount * 2);
velocities = new Float32Array(particleCount * 2);
lifeSpans = new Float32Array(particleCount * 2);
speeds = new Float32Array(particleCount);
hues = new Float32Array(particleCount);
sizes = new Float32Array(particleCount);

var i = void 0;

for (i = 0; i < particleCount * 2; i += 2) {
initParticle(i);
}
}

function initParticle(i) {
var iy = void 0,ih = void 0,rd = void 0,rt = void 0,cx = void 0,sy = void 0,x = void 0,y = void 0,s = void 0,rv = void 0,vx = void 0,vy = void 0,t = void 0,h = void 0,si = void 0,l = void 0,ttl = void 0;

iy = i + 1;
ih = 0.5 * i | 0;
rd = rand(spawnRadius);
rt = rand(TAU);
cx = cos(rt);
sy = sin(rt);
x = center[0] + cx * rd;
y = center[1] + sy * rd;
rv = randIn(0.1, 1);
s = randIn(1, 8);
vx = rv * cx * 0.1;
vy = rv * sy * 0.1;
si = randIn(0.1, 1);
h = randIn(160, 260);
l = 0;
ttl = randIn(50, 200);

positions[i] = x;
positions[iy] = y;
velocities[i] = vx;
velocities[iy] = vy;
hues[ih] = h;
sizes[ih] = si;
speeds[ih] = s;
lifeSpans[i] = l;
lifeSpans[iy] = ttl;
}

function drawParticle(i) {
var iy = void 0,ih = void 0,x = void 0,y = void 0,n = void 0,tx = void 0,ty = void 0,s = void 0,vx = void 0,vy = void 0,h = void 0,si = void 0,l = void 0,dl = void 0,ttl = void 0,c = void 0;

iy = i + 1;
ih = 0.5 * i | 0;
x = positions[i];
y = positions[iy];
n = simplex.noise3D(x * 0.0025, y * 0.0025, tick * 0.0005) * TAU;
vx = lerp(velocities[i], cos(n * noiseSteps), 0.05);
vy = lerp(velocities[iy], sin(n * noiseSteps), 0.05);
s = speeds[ih];
tx = x + vx * s;
ty = y + vy * s;
h = hues[ih];
si = sizes[ih];
l = lifeSpans[i];
ttl = lifeSpans[iy];
dl = fadeInOut(l, ttl);
c = "hsla(" + h + ",50%,60%," + dl + ")";

l++;

ctx.a.save();
ctx.a.lineWidth = dl * si + 1;
ctx.a.strokeStyle = c;
ctx.a.beginPath();
ctx.a.moveTo(x, y);
ctx.a.lineTo(tx, ty);
ctx.a.stroke();
ctx.a.closePath();
ctx.a.restore();

positions[i] = tx;
positions[iy] = ty;
velocities[i] = vx;
velocities[iy] = vy;
lifeSpans[i] = l;

(checkBounds(x, y) || l > ttl) && initParticle(i);
}

function checkBounds(x, y) {
return (
x > canvas.a.width ||
x < 0 ||
y > canvas.a.height ||
y < 0);

}

function createCanvas() {
canvas = {
a: document.createElement("canvas"),
b: document.createElement("canvas") };

canvas.b.style = "\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t";






document.body.appendChild(canvas.b);
ctx = {
a: canvas.a.getContext("2d"),
b: canvas.b.getContext("2d") };

resize();
}

function resize() {var _window =
window,innerWidth = _window.innerWidth,innerHeight = _window.innerHeight;

canvas.a.width = canvas.b.width = innerWidth;
canvas.a.height = canvas.b.height = innerHeight;
center[0] = 0.5 * innerWidth;
center[1] = 0.5 * innerHeight;
}

function draw() {
tick++;
ctx.a.clearRect(0, 0, canvas.a.width, canvas.a.height);

ctx.b.fillStyle = 'rgba(0,0,0,0.1)';
ctx.b.fillRect(0, 0, canvas.b.width, canvas.b.height);

var i = void 0;

for (i = 0; i < particleCount * 2; i += 2) {
drawParticle(i);
}

ctx.b.save();
ctx.b.filter = 'blur(8px)';
ctx.b.globalCompositeOperation = 'lighten';
ctx.b.drawImage(canvas.a, 0, 0);
ctx.b.restore();

ctx.b.save();
ctx.b.globalCompositeOperation = 'lighter';
ctx.b.drawImage(canvas.a, 0, 0);
ctx.b.restore();

window.requestAnimationFrame(draw)
}

window.addEventListener("load", setup);
window.addEventListener("resize", resize);

# 下载地址

以上就是开源代码,可以自行 DIY 修改,懒得话也有打包好的

下载链接:蓝奏云

密码:回复可见

更新于 阅读次数

请我喝[茶]~( ̄▽ ̄)~*

零躺躺&夜灵 微信扫扫

微信扫扫

零躺躺&夜灵 支付宝

支付宝

零躺躺&夜灵 爱你

爱你