最近我又点闲了，所以用DeepSeek做了一个落地站给我的OSS存储桶（其实是EdgeOne Pages托管的）用，我发现效果还很不错，收获了很多人的喜欢。
具体的效果我建议去我的那个网站https://oss.bugcool.cn/去看看，因为是动态的哦~
话不多说，直接把源代码给你们随便用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>BugCool · 个人OSS存储站 | 私有存储枢纽</title>
<!-- 引入 Google Fonts 字体 -->
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,600;14..32,700;14..32,800&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Font Awesome 6 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', 'Space Grotesk', sans-serif;
overflow-x: hidden;
background-color: #0a0a1a;
color: #e0e0f0;
line-height: 1.6;
}
/* Three.js 画布背景层 */
#canvas-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
outline: none;
}
/* 主内容层 */
.main-content {
position: relative;
z-index: 2;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem 1.5rem;
}
/* 毛玻璃卡片容器 - 更干净 */
.glass-card {
max-width: 780px;
width: 100%;
background: rgba(15, 20, 35, 0.06);
backdrop-filter: blur(4px);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
padding: 3rem 2.5rem;
text-align: center;
animation: fadeIn 0.6s ease-out;
}
@keyframes fadeIn {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
/* 安全标签 - 更简洁 */
.glow-tag {
display: inline-block;
background: rgba(59, 130, 246, 0.12);
border-radius: 20px;
padding: 0.25rem 0.9rem;
font-size: 0.72rem;
font-weight: 500;
color: #93bbfc;
border: 1px solid rgba(59, 130, 246, 0.2);
margin-bottom: 1.5rem;
}
/* 主标题 */
.hero-title {
font-size: 2.8rem;
font-weight: 700;
line-height: 1.2;
margin: 0.5rem 0 0.5rem;
}
.gradient-text {
background: linear-gradient(135deg, #e8f0ff, #7dd3fc, #3b82f6);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.oss-sub {
font-size: 0.95rem;
letter-spacing: 3px;
font-weight: 500;
color: #8aa8dd;
margin-bottom: 1.8rem;
text-transform: uppercase;
}
/* 通知区块 - 更柔和 */
.notice-block {
background: rgba(15, 25, 50, 0.5);
border-radius: 12px;
padding: 1rem 1.4rem;
margin: 1.2rem auto;
max-width: 460px;
text-align: left;
}
.notice-block p {
font-size: 0.9rem;
line-height: 1.5;
margin: 0.3rem 0;
color: #c8d8f0;
}
.notice-block strong {
color: #60a5fa;
font-weight: 600;
}
.private-badge {
color: #80b4ff;
font-size: 0.78rem;
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(59, 130, 246, 0.1);
padding: 0.15rem 0.7rem;
border-radius: 20px;
margin-top: 0.4rem;
}
/* 特性指标 - 更简洁 */
.features {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.2rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.feature-item {
background: rgba(255, 255, 255, 0.04);
padding: 0.55rem 1.1rem;
border-radius: 20px;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.82rem;
font-weight: 500;
border: 1px solid rgba(255, 255, 255, 0.06);
color: #b8c8e8;
transition: all 0.2s;
}
.feature-item i {
font-size: 0.9rem;
color: #5b9eff;
}
.feature-item:hover {
background: rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.2);
}
/* 底部版权 */
.footer-note {
margin-top: 2.5rem;
font-size: 0.78rem;
color: rgba(150, 180, 220, 0.6);
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding-top: 1.2rem;
}
.footer-note span {
cursor: default;
}
.footer-note span i {
margin-right: 5px;
}
/* 圆形光晕背景 */
.bg-circle {
position: fixed;
border-radius: 50%;
filter: blur(80px);
opacity: 0.12;
z-index: 1;
pointer-events: none;
}
.circle-1 {
width: 400px;
height: 400px;
background: #3b82f6;
bottom: -150px;
left: -120px;
animation: floatCircle 15s ease-in-out infinite;
}
.circle-2 {
width: 320px;
height: 320px;
background: #6366f1;
top: -100px;
right: -100px;
animation: floatCircle 13s ease-in-out infinite reverse;
}
@keyframes floatCircle {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(20px, 15px); }
}
/* 响应式 */
@media (max-width: 768px) {
.glass-card {
padding: 2rem 1.5rem;
border-radius: 20px;
}
.hero-title {
font-size: 2rem;
}
.features {
gap: 0.8rem;
}
.feature-item {
font-size: 0.75rem;
padding: 0.4rem 0.9rem;
}
.notice-block p {
font-size: 0.82rem;
}
}
@media (max-width: 480px) {
.hero-title {
font-size: 1.6rem;
}
.glass-card {
padding: 1.5rem 1.2rem;
}
.oss-sub {
font-size: 0.8rem;
letter-spacing: 2px;
}
}
::-webkit-scrollbar { width: 0; background: transparent; }
</style>
</head>
<body>
<!-- Three.js 画布容器 -->
<div id="canvas-container"></div>
<!-- 融合原个人OSS站风格的动态模糊圆形 (科技氛围) -->
<div class="bg-circle circle-1"></div>
<div class="bg-circle circle-2"></div>
<!-- 主内容区: 融合个人OSS存储站核心文字 -->
<div class="main-content">
<div class="glass-card">
<div class="glow-tag">
<i class="fas fa-lock"></i> 本站点已启用安全的SSL证书
</div>
<!-- 核心标题：PERSONAL OSS (完全融合个人OSS站特性) -->
<div class="hero-title">
<span class="gradient-text">PERSONAL OSS</span>
</div>
<div class="oss-sub">PRIVATE STORAGE SERVICE</div>
<!-- 融合第二个HTML的重要通知区块 -->
<div class="notice-block">
<p><strong><i class="fas fa-shield-alt"></i> NOTICE:</strong> This is a personal OSS homepage</p>
<p>Private use only · Non-public service | 私有存储，自主可控</p>
<div class="private-badge">
<i class="fas fa-fingerprint"></i> 端到端加密 · 仅限授权访问
</div>
</div>
<!-- 特性指标：个人存储站优势 -->
<div class="features">
<div class="feature-item"><i class="fas fa-microchip"></i> 专属命名空间</div>
<div class="feature-item"><i class="fas fa-shield-virus"></i> 零信任加密</div>
<div class="feature-item"><i class="fas fa-chart-line"></i> 高可用SLA</div>
<div class="feature-item"><i class="fas fa-cloud-upload-alt"></i> 冷热分层</div>
</div>
<!-- 底部版权：完全按第二个HTML展示 Copyright notice -->
<div class="footer-note">
<span>Copyright © 2026 bugcool. All Rights Reserved.</span>
</div>
</div>
</div>
<!-- 引入 Three.js 核心库 -->
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.128.0/build/three.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
// --- 初始化场景、相机、渲染器 (保留原有炫酷科技粒子+几何体群) ---
const container = document.getElementById('canvas-container');
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x030318);
scene.fog = new THREE.FogExp2(0x030318, 0.003);
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 2, 12);
camera.lookAt(0, 0, 0);
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);
// --- 灯光系统: 科技感动态光效 ---
const ambientLight = new THREE.AmbientLight(0x111122);
scene.add(ambientLight);
const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(2, 5, 3);
scene.add(dirLight);
const backLight = new THREE.PointLight(0x2266ff, 0.6);
backLight.position.set(-2, 1, -4);
scene.add(backLight);
// --- 粒子系统: 流动数据感 ---
const particleCount = 1800;
const geometry = new THREE.BufferGeometry();
const positions = new Float32Array(particleCount * 3);
const colors = new Float32Array(particleCount * 3);
for (let i = 0; i < particleCount; i++) {
let radius = 5;
let theta = Math.random() * Math.PI * 2;
let phi = Math.acos(2 * Math.random() - 1);
let r = radius * (0.6 + Math.random() * 0.7);
let x = Math.sin(theta) * Math.cos(phi) * r;
let y = Math.sin(theta) * Math.sin(phi) * r * 0.5;
let z = Math.cos(theta) * r;
positions[i*3] = x;
positions[i*3+1] = y;
positions[i*3+2] = z;
const colorChoice = Math.random();
let rCol, gCol, bCol;
if (colorChoice < 0.6) {
rCol = 0.2 + Math.random()*0.3;
gCol = 0.4 + Math.random()*0.4;
bCol = 0.7 + Math.random()*0.3;
} else {
rCol = 0.5 + Math.random()*0.3;
gCol = 0.3 + Math.random()*0.3;
bCol = 0.8 + Math.random()*0.2;
}
colors[i*3] = rCol;
colors[i*3+1] = gCol;
colors[i*3+2] = bCol;
}
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
const particleMaterial = new THREE.PointsMaterial({ size: 0.07, vertexColors: true, transparent: true, opacity: 0.7, blending: THREE.AdditiveBlending });
const particleSystem = new THREE.Points(geometry, particleMaterial);
scene.add(particleSystem);
// --- 增加旋转几何体: 科技环 ---
const techGroup = new THREE.Group();
const torusKnotGeo = new THREE.TorusKnotGeometry(1.3, 0.18, 150, 20, 3, 4);
const knotMaterial = new THREE.MeshStandardMaterial({ color: 0x2c7be5, emissive: 0x0a4c8a, emissiveIntensity: 0.4, metalness: 0.6, roughness: 0.4 });
const knot = new THREE.Mesh(torusKnotGeo, knotMaterial);
techGroup.add(knot);
const ringCount = 30;
const ringItems = [];
const ringRadius = 2.0;
for (let i = 0; i < ringCount; i++) {
const angle = (i / ringCount) * Math.PI * 2;
const cube = new THREE.Mesh(
new THREE.BoxGeometry(0.1, 0.1, 0.1),
new THREE.MeshStandardMaterial({ color: 0x4ab5ff, emissive: 0x1266aa, emissiveIntensity: 0.3 })
);
cube.position.x = Math.cos(angle) * ringRadius;
cube.position.z = Math.sin(angle) * ringRadius;
cube.position.y = Math.sin(angle * 2) * 0.2;
techGroup.add(cube);
ringItems.push(cube);
}
const floatModels = [];
const modelColors = [0x3a86ff, 0x6366f1, 0x60a5fa];
for (let i = 0; i < 20; i++) {
let geo;
const rand = Math.random();
if (rand < 0.33) geo = new THREE.BoxGeometry(0.15, 0.15, 0.15);
else if (rand < 0.66) geo = new THREE.IcosahedronGeometry(0.1, 0);
else geo = new THREE.TetrahedronGeometry(0.12);
const mat = new THREE.MeshStandardMaterial({ color: modelColors[Math.floor(Math.random() * modelColors.length)], emissive: 0x225588, emissiveIntensity: 0.2 });
const mesh = new THREE.Mesh(geo, mat);
const rad = 1.0 + Math.random() * 1.8;
const thetaR = Math.random() * Math.PI * 2;
const phiR = Math.acos(2 * Math.random() - 1);
mesh.position.x = Math.sin(thetaR) * Math.cos(phiR) * rad;
mesh.position.y = Math.sin(thetaR) * Math.sin(phiR) * rad * 0.8;
mesh.position.z = Math.cos(thetaR) * rad;
mesh.userData = { speed: 0.005 + Math.random() * 0.008, axis: new THREE.Vector3(Math.random(), Math.random(), Math.random()).normalize() };
techGroup.add(mesh);
floatModels.push(mesh);
}
scene.add(techGroup);
const dustCount = 800;
const dustGeo = new THREE.BufferGeometry();
const dustPositions = new Float32Array(dustCount * 3);
for (let i = 0; i < dustCount; i++) {
const angle = Math.random() * Math.PI * 2;
const rad = 3.0 + Math.random() * 1.5;
const yOff = (Math.random() - 0.5) * 2.0;
dustPositions[i*3] = Math.cos(angle) * rad;
dustPositions[i*3+1] = yOff;
dustPositions[i*3+2] = Math.sin(angle) * rad;
}
dustGeo.setAttribute('position', new THREE.BufferAttribute(dustPositions, 3));
const dustMat = new THREE.PointsMaterial({ color: 0x5588cc, size: 0.03, transparent: true, blending: THREE.AdditiveBlending });
const dustRing = new THREE.Points(dustGeo, dustMat);
scene.add(dustRing);
const starCount = 500;
const starGeo = new THREE.BufferGeometry();
const starPos = new Float32Array(starCount * 3);
for (let i = 0; i < starCount; i++) {
starPos[i*3] = (Math.random() - 0.5) * 150;
starPos[i*3+1] = (Math.random() - 0.5) * 60;
starPos[i*3+2] = (Math.random() - 0.5) * 50 - 20;
}
starGeo.setAttribute('position', new THREE.BufferAttribute(starPos, 3));
const starMat = new THREE.PointsMaterial({ color: 0xffffff, size: 0.05, transparent: true, opacity: 0.4 });
const stars = new THREE.Points(starGeo, starMat);
scene.add(stars);
let mouseX = 0, mouseY = 0;
window.addEventListener('mousemove', (event) => {
mouseX = (event.clientX / window.innerWidth) * 2 - 1;
mouseY = (event.clientY / window.innerHeight) * 2 - 1;
});
// 动画循环
function animate() {
const elapsedTime = performance.now() * 0.001;
particleSystem.rotation.y = elapsedTime * 0.04;
particleSystem.rotation.x = Math.sin(elapsedTime * 0.12) * 0.08;
particleSystem.rotation.z = Math.cos(elapsedTime * 0.1) * 0.04;
techGroup.rotation.y = elapsedTime * 0.15;
techGroup.rotation.x = Math.sin(elapsedTime * 0.15) * 0.08;
techGroup.rotation.z = Math.cos(elapsedTime * 0.14) * 0.05;
techGroup.position.y = Math.sin(elapsedTime * 0.4) * 0.04;
ringItems.forEach((item) => {
item.rotation.x += 0.015;
item.rotation.z += 0.01;
});
floatModels.forEach(model => {
model.rotateOnWorldAxis(model.userData.axis, 0.008);
});
knotMaterial.emissiveIntensity = 0.4 + Math.sin(elapsedTime * 1.5) * 0.15;
dustRing.rotation.y += 0.002;
dustRing.rotation.x = Math.sin(elapsedTime * 0.15) * 0.08;
const targetX = mouseX * 0.6;
const targetY = mouseY * 0.4;
camera.position.x += (targetX - camera.position.x) * 0.03;
camera.position.y += (-targetY * 0.2 - camera.position.y) * 0.03;
camera.lookAt(0, 0.3, 0);
stars.rotation.y += 0.0003;
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
animate();
window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
console.log('%c✨ BugCool · 个人OSS存储站 | 私有存储 + 次世代视觉枢纽 ✨', 'color: #0cf; font-size: 15px;');
</script>
</body>
</html>