【开源】无人区导航页面

作为一个资深的HTML前端工程师，自从"天卓峰会"改名"无人区"后，就没再给它写一个新的导航页，这实在是我的一大惭愧啊！

这次，我带着全新的"它"，来到你们面前，正好也算是我回归CSDN的一个礼物吧!

刚刚二刷《黑客帝国》系列，印象真的很深刻，于是，我写代码时，采用了那种黑色+绿色的经典黑客风设计。

代码（.html）

<!DOCTYPE html>

<head>

<title>无人区·无人区科技·无人区俱乐部</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Courier New', Consolas, monospace;

line-height: 1.6;

color: #00ff41;

background-color: #000000;

min-height: 100vh;

padding: 20px;

overflow-x: hidden;

position: relative;

}

/* 黑客帝国数字雨背景 */

body::before {

content: '';

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background:

linear-gradient(to bottom, transparent 95%, rgba(0, 255, 65, 0.03) 100%),

radial-gradient(circle at 30% 30%, rgba(0, 20, 0, 0.8) 0%, transparent 50%),

radial-gradient(circle at 70% 70%, rgba(0, 30, 0, 0.6) 0%, transparent 50%);

background-color: #000;

z-index: -2;

}

/* 数字雨效果 */

#matrix-rain {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: -1;

opacity: 0.3;

}

.container {

max-width: 1200px;

margin: 0 auto;

background: rgba(0, 10, 0, 0.85);

border-radius: 0;

border: 1px solid #00ff41;

box-shadow:

0 0 20px rgba(0, 255, 65, 0.5),

inset 0 0 30px rgba(0, 30, 0, 0.8);

overflow: hidden;

position: relative;

}

/* 绿色扫描线效果 */

.container::before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: repeating-linear-gradient(

0deg,

rgba(0, 0, 0, 0.15) 0px,

rgba(0, 0, 0, 0.15) 1px,

transparent 1px,

transparent 2px

);

pointer-events: none;

z-index: 1;

}

.header {

background: rgba(0, 20, 0, 0.9);

color: #00ff41;

padding: 50px 40px;

text-align: center;

position: relative;

overflow: hidden;

border-bottom: 1px solid #00ff41;

text-transform: uppercase;

letter-spacing: 2px;

}

.header::before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: linear-gradient(

90deg,

transparent 0%,

rgba(0, 255, 65, 0.05) 50%,

transparent 100%

);

animation: scanline 8s linear infinite;

}

@keyframes scanline {

0% { transform: translateX(-100%); }

100% { transform: translateX(100%); }

}

.header h1 {

font-size: 2.5em;

margin-bottom: 10px;

position: relative;

z-index: 1;

text-shadow:

0 0 10px #00ff41,

0 0 20px #00ff41;

font-weight: 700;

}

.version {

font-size: 0.9em;

opacity: 0.7;

position: relative;

z-index: 1;

color: #00cc33;

font-family: 'Courier New', monospace;

border: 1px solid #00cc33;

padding: 5px 10px;

display: inline-block;

margin-top: 10px;

background: rgba(0, 20, 0, 0.5);

}

.content {

padding: 40px;

}

.section {

margin-bottom: 40px;

padding: 30px;

background: rgba(0, 15, 0, 0.7);

border-radius: 0;

border-left: 5px solid #00ff41;

transition: all 0.3s ease;

border: 1px solid #003300;

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);

position: relative;

overflow: hidden;

}

.section:hover {

transform: translateY(-5px);

box-shadow:

0 10px 30px rgba(0, 255, 65, 0.3),

inset 0 0 20px rgba(0, 30, 0, 0.8);

background: rgba(0, 25, 0, 0.8);

border-color: #00ff41;

}

.section h2 {

color: #00ff41;

margin-bottom: 20px;

font-size: 1.8em;

display: flex;

align-items: center;

gap: 10px;

text-shadow: 0 0 5px #00ff41;

font-weight: 700;

letter-spacing: 1px;

}

.section h2::before {

content: '>_';

color: #00ff41;

font-size: 1em;

font-family: 'Courier New', monospace;

}

.links-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 15px;

margin-top: 20px;

}

.link-item {

background: rgba(0, 20, 0, 0.6);

padding: 15px;

border-radius: 0;

transition: all 0.3s ease;

border: 1px solid #003300;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);

font-family: 'Courier New', monospace;

position: relative;

}

.link-item:hover {

background: rgba(0, 30, 0, 0.8);

transform: translateX(5px);

box-shadow:

0 6px 15px rgba(0, 255, 65, 0.4),

inset 0 0 10px rgba(0, 40, 0, 0.8);

border-color: #00ff41;

}

.link-item strong {

color: #00cc33;

display: block;

margin-bottom: 8px;

font-weight: 700;

}

.link-item a {

color: #00ff41;

text-decoration: none;

font-weight: 500;

display: block;

word-break: break-all;

transition: all 0.3s ease;

font-family: 'Courier New', monospace;

}

.link-item a:hover {

color: #ffffff;

text-shadow: 0 0 8px #00ff41;

}

.contact-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 20px;

margin-top: 20px;

}

.contact-item {

background: rgba(0, 20, 0, 0.6);

padding: 20px;

border-radius: 0;

text-align: center;

transition: all 0.3s ease;

border: 1px solid #003300;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);

font-family: 'Courier New', monospace;

}

.contact-item:hover {

transform: scale(1.03);

background: rgba(0, 30, 0, 0.8);

box-shadow:

0 6px 15px rgba(0, 255, 65, 0.4),

inset 0 0 10px rgba(0, 40, 0, 0.8);

border-color: #00ff41;

}

.contact-item .label {

font-weight: bold;

color: #00cc33;

margin-bottom: 5px;

text-shadow: 0 0 3px #00cc33;

font-size: 1.1em;

letter-spacing: 1px;

}

.story-section {

background: rgba(0, 20, 0, 0.8);

color: #00ff41;

padding: 40px;

border-radius: 0;

margin-top: 30px;

border: 1px solid #003300;

box-shadow:

0 10px 30px rgba(0, 0, 0, 0.8),

inset 0 0 30px rgba(0, 30, 0, 0.8);

font-family: 'Courier New', monospace;

}

.story-section h3 {

font-size: 1.5em;

margin-bottom: 15px;

color: #00ff41;

text-shadow: 0 0 5px #00ff41;

font-weight: 700;

border-bottom: 1px solid #00ff41;

padding-bottom: 10px;

letter-spacing: 1px;

}

.story-section p {

margin-bottom: 20px;

line-height: 1.8;

text-align: justify;

color: #b3ffb3;

}

.highlight {

background: rgba(0, 255, 65, 0.15);

padding: 2px 8px;

border-radius: 0;

font-weight: 700;

color: #ffffff;

text-shadow: 0 0 3px #00ff41;

border: 1px solid #00ff41;

font-family: 'Courier New', monospace;

}

.footer {

background: rgba(0, 10, 0, 0.9);

color: #00cc33;

text-align: center;

padding: 30px;

font-size: 0.9em;

border-top: 1px solid #00ff41;

text-transform: uppercase;

letter-spacing: 2px;

font-family: 'Courier New', monospace;

}

.footer p {

margin-bottom: 10px;

text-shadow: 0 0 5px #00cc33;

}

@media (max-width: 768px) {

.header h1 {

font-size: 2em;

}

.content {

padding: 20px;

}

.section {

padding: 20px;

}

.links-grid {

grid-template-columns: 1fr;

}

.contact-grid {

grid-template-columns: 1fr;

}

.logo-animation {

display: inline-block;

animation: glitch 3s infinite;

position: relative;

}

@keyframes glitch {

0% {

transform: translate(0);

text-shadow: 0 0 10px #00ff41;

}

1% {

transform: translate(-1px, 1px);

text-shadow: 0 0 15px #00ff41;

}

2% {

transform: translate(1px, -1px);

text-shadow: 0 0 20px #00ff41;

}

3% {

transform: translate(0);

text-shadow: 0 0 10px #00ff41;

}

100% {

transform: translate(0);

text-shadow: 0 0 10px #00ff41;

}

/* 二进制闪烁效果 */

.binary-flash {

position: absolute;

color: #00ff41;

font-size: 0.8em;

opacity: 0;

animation: binaryFlash 5s infinite;

pointer-events: none;

}

@keyframes binaryFlash {

0%, 100% { opacity: 0; }

10%, 15% { opacity: 0.7; }

20%, 25% { opacity: 0; }

30%, 35% { opacity: 0.5; }

}

/* 终端光标效果 */

.cursor {

display: inline-block;

width: 8px;

height: 1.2em;

background-color: #00ff41;

animation: blink 1s infinite;

vertical-align: middle;

margin-left: 2px;

}

@keyframes blink {

0%, 100% { opacity: 1; }

50% { opacity: 0; }

}

</style>

</head>

<body>

<h1><span class="logo-animation">无人区·无人区科技·无人区俱乐部</span><span class="cursor"></span></h1>

<div class="version">.html程序【版本号：wrq.1.0.0】</div>

</div>

<h2>网站与项目</h2>

<strong>发布页网址</strong>

<a href="https://tunhs.mysxl.cn/" target="_blank">https://tunhs.mysxl.cn/\</a>

</div>

<strong>官方网站及个人博客网址</strong>

<a href="https://theuniversalnhs.mysxl.cn/" target="_blank">https://theuniversalnhs.mysxl.cn/\</a>

</div>

<strong>天卓宝盒（Brand new link）网址</strong>

<a href="https://open.vlinkx.cn/天卓峰会" target="_blank">https://open.vlinkx.cn/天卓峰会\</a>

</div>

<strong>CSDN博客网址</strong>

<a href="https://blog.csdn.net/2503_90553990?type=lately" target="_blank">https://blog.csdn.net/2503_90553990?type=lately\</a>

</div>

<strong>官方哔哩哔哩网址</strong>

<a href="https://space.bilibili.com/3546852389554232" target="_blank">https://space.bilibili.com/3546852389554232\</a>

</div>

<strong>官方5Z5D上网主页网址</strong>

<a href="http://tunhs.5z5d.com/" target="_blank">http://tunhs.5z5d.com/\</a>

</div>

<strong>官方博客园网址</strong>

<a href="https://www.cnblogs.com/tunhs" target="_blank">https://www.cnblogs.com/tunhs\</a>

</div>

<strong>Moon ISO文件集合站网址</strong>

<a href="https://open.vlinkx.cn/win7win10win11" target="_blank">https://open.vlinkx.cn/win7win10win11\</a>

</div>

<strong>Skytrail ISO 天卓峰会镜像馆网址</strong>

<a href="https://open.vlinkx.cn/skytraliso" target="_blank">https://open.vlinkx.cn/skytraliso\</a>

</div>

<strong>svdownload直链下载网址</strong>

<a href="https://open.vlinkx.cn/svdownload" target="_blank">https://open.vlinkx.cn/svdownload\</a>

</div>

</div>

</div>

</div>

</div>

<div>theuniversalnhs@proton.me</div>

</div>

<div>theuniversalnhs@gmail.com</div>

</div>

<div>wurenqu000@icloud.com</div>

</div>

<h2>我们的故事</h2>

<h3>无人区（The Universal NHS）------ 用"镜像Z+I"连接全球，让数字资源成为所有人的"通用语言"</h3>

<p>当你看见无人区的logo，会先读懂两个字母里的"全球密码"：<span class="highlight">镜像的Z</span>像一缕跨越国界的网络信号，又像一座连接不同角落的"数字桥"；<span class="highlight">直立的I</span>如同一根代表"每一个人"的指针，稳稳扎根在符号中央。这不是巧合------Z是"全球连接"的隐喻，I是"每一个个体"的象征，二者的交织，正是无人区的核心使命：以"人"为中心，用"连接"打破地域壁垒，让免费网络资源成为全球共享的"通用语言"。</p>

<h3>「镜像Z」：一张覆盖全球的资源网</h3>

<p>镜像的Z像全球网络的脉络，它把无人区的资源"织"成了一张无边界的网：</p>

<p>• <span class="highlight">宝盒板块</span>（标注为"2"）是网的"枢纽"，这里藏着来自全球志愿者的共同贡献------从基础的多语言网络工具教程，到适用于不同地区的实用软件，每一个资源都经过"全球适用性"筛选，只为让你"一键获取"；</p>

<p>• <span class="highlight">博客板块</span>（标注为"1"）是网的"丝线"，这里有来自不同国家创作者的原创分享------从个人成长的跨文化经验，到行业前沿的全球观察，每一篇文字都带着"共鸣"的温度，只为让你"找到同类"；</p>

<p>• <span class="highlight">CSDN博客</span>（标注为"3"）是网的"延伸"，这里有全球科技从业者的技术干货------从编程入门的多语言指南，到人工智能的跨领域应用，每一篇内容都聚焦"实用"，只为让你"提升技能"。</p>

<p>I是"每一个个体"的象征，也是无人区的"初心原点"。作为专注于全球数字普惠的非盈利组织，我们的"免费"从不是噱头，而是刻进基因里的坚持：</p>

<p>• 宝盒里的资源不设地域门槛------无论你在亚洲的城市、非洲的乡村，还是美洲的小镇，都能平等获取；</p>

<p>• 博客中的文字没有身份区别------无论你是刚接触数字世界的新手，还是深耕技术的专家，都能在这里找到有价值的内容；</p>

<p>• CSDN专栏的技术打破语言壁垒------我们翻译、整理多语言的技术资料，只为让"科技"不再是"少数人的游戏"。</p>

<h3>「小路与星空」：一段属于全球的探索故事</h3>

<p>logo下方的蜿蜒小路，是每一个用户探索资源的"全球路径"------从宝盒出发，沿着小路走到博客，再到CSDN，每一步都有全球伙伴的陪伴；小路尽头的星空，是无人区的"未来愿景"------资源像星星一样遍布全球，每一颗星星都为"照亮某个人的路"而存在。就像镜像的Z打破了"地域的边界"，无人区的资源也没有"本地"与"外地"之分，每一份资源都是为"全球用户"准备的。</p>

<h3>结语：让数字资源成为"全球通用语言"</h3>

<p>无人区不是一个"局限于某一地区"的组织，它是一个连接全球的数字家园。在这里，没有地域的限制（无论你在世界的哪个角落），没有语言的障碍（我们用多语言覆盖需求），没有资源的壁垒（所有资源都免费共享）------所有的一切，都只为实现一个简单却坚定的愿望：让每一个人，都能平等地享受数字时代的红利。</p>

<p>如果你是寻找资源的"全球探索者"，无人区的"网"会帮你找到方向；如果你是愿意分享的"全球贡献者"，无人区的"星空"会容纳你的光芒。无人区（The Universal NHS），用"镜像Z+I"连接全球，用初心守护每一个人的数字权利------ 我们的资源，只为"让数字世界，成为所有人的世界"。</p>

</div>

<p>让数字资源成为所有人的"通用语言"</p>

</div>

// 黑客帝国数字雨效果

const canvas = document.getElementById('matrix-rain');

const ctx = canvas.getContext('2d');

// 设置Canvas尺寸

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

// 数字字符集

const chars = "01";

const charArray = chars.split("");

// 列宽和行高

const fontSize = 14;

const columns = Math.floor(canvas.width / fontSize);

// 记录每一列当前绘制的位置

const drops = [];

for (let i = 0; i < columns; i++) {

drops[i] = Math.floor(Math.random() * canvas.height / fontSize);

}

// 数字雨绘制函数

function drawMatrixRain() {

// 半透明黑色背景（创建拖尾效果）

ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';

ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = '#00ff41';

ctx.font = `${fontSize}px monospace`;

// 绘制每个字符

for (let i = 0; i < drops.length; i++) {

// 随机字符

const char = charArray[Math.floor(Math.random() * charArray.length)];

// 绘制字符

ctx.fillText(char, i * fontSize, drops[i] * fontSize);

// 随机重置字符位置

if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {

drops[i] = 0;

}

// 向下移动

drops[i]++;

}

// 窗口调整大小时重置Canvas

window.addEventListener('resize', function() {

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

});

// 添加二进制闪烁效果

function createBinaryFlashes() {

const container = document.querySelector('.container');

for (let i = 0; i < 20; i++) {

const binaryFlash = document.createElement('div');

binaryFlash.className = 'binary-flash';

binaryFlash.textContent = Math.random() > 0.5 ? '1' : '0';

binaryFlash.style.left = Math.random() * 100 + '%';

binaryFlash.style.top = Math.random() * 100 + '%';

binaryFlash.style.animationDelay = Math.random() * 5 + 's';

container.appendChild(binaryFlash);

}

// 修改点击效果为绿色二进制数字

document.addEventListener('click', function(e) {

const binary = document.createElement('div');

binary.innerHTML = Math.random() > 0.5 ? '1' : '0';

binary.style.position = 'fixed';

binary.style.left = e.clientX + 'px';

binary.style.top = e.clientY + 'px';

binary.style.color = '#00ff41';

binary.style.fontSize = '24px';

binary.style.fontFamily = 'monospace';

binary.style.fontWeight = 'bold';

binary.style.pointerEvents = 'none';

binary.style.animation = 'binaryFloat 1s ease-out';

binary.style.zIndex = '9999';

binary.style.textShadow = '0 0 10px #00ff41';

document.body.appendChild(binary);

setTimeout(() => {

binary.remove();

}, 1000);

});

// 添加二进制漂浮动画样式

const binaryStyle = document.createElement('style');

binaryStyle.textContent = `

@keyframes binaryFloat {

0% {

transform: translateY(0) scale(1);

opacity: 1;

}

100% {

transform: translateY(-50px) scale(1.5);

opacity: 0;

}

document.head.appendChild(binaryStyle);

// 添加滚动动画效果

const observerOptions = {

threshold: 0.1,

rootMargin: '0px 0px -50px 0px'

};

const observer = new IntersectionObserver(function(entries) {

entries.forEach(entry => {

if (entry.isIntersecting) {

entry.target.style.opacity = '1';

entry.target.style.transform = 'translateY(0)';

}

});

}, observerOptions);

// 初始化动画

document.querySelectorAll('.section').forEach(section => {

section.style.opacity = '0';

section.style.transform = 'translateY(30px)';

section.style.transition = 'opacity 0.6s ease, transform 0.6s ease';

observer.observe(section);

});

// 启动数字雨动画

let matrixInterval = setInterval(drawMatrixRain, 35);

// 创建二进制闪烁

createBinaryFlashes();

// 添加终端输入效果

const headerTitle = document.querySelector('.header h1');

const originalText = headerTitle.textContent;

headerTitle.innerHTML = '';

let i = 0;

function typeWriter() {

if (i < originalText.length) {

headerTitle.innerHTML += originalText.charAt(i);

i++;

setTimeout(typeWriter, 100);

} else {

// 添加闪烁光标

const cursor = document.createElement('span');

cursor.className = 'cursor';

headerTitle.appendChild(cursor);

}

// 页面加载完成后开始打字效果

window.addEventListener('load', function() {

setTimeout(typeWriter, 1000);

});

// 平滑滚动

document.querySelectorAll('a[href^="#"]').forEach(anchor => {

anchor.addEventListener('click', function (e) {

e.preventDefault();

document.querySelector(this.getAttribute('href')).scrollIntoView({

behavior: 'smooth'

});

</script>

</body>

</html>