303 lines
12 KiB
HTML
303 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>十层认知：黑洞</title>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;700&display=swap');
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Noto Serif SC', serif;
|
||
background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 50%, #16213e 100%);
|
||
color: #e8e8e8;
|
||
line-height: 1.8;
|
||
min-height: 100vh;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.container {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
padding: 2rem;
|
||
position: relative;
|
||
}
|
||
|
||
.header {
|
||
text-align: center;
|
||
margin-bottom: 3rem;
|
||
position: relative;
|
||
}
|
||
|
||
.title {
|
||
font-family: 'Ma Shan Zheng', cursive;
|
||
font-size: 3rem;
|
||
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
|
||
background-size: 400% 400%;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
animation: gradientShift 4s ease-in-out infinite;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 1.2rem;
|
||
color: #b8b8b8;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.layer {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 15px;
|
||
padding: 2rem;
|
||
margin-bottom: 2rem;
|
||
transform: translateY(20px);
|
||
opacity: 0;
|
||
animation: fadeInUp 0.8s ease forwards;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.layer:nth-child(odd) {
|
||
animation-delay: 0.1s;
|
||
}
|
||
|
||
.layer:nth-child(even) {
|
||
animation-delay: 0.2s;
|
||
}
|
||
|
||
.layer-number {
|
||
position: absolute;
|
||
top: -10px;
|
||
right: 20px;
|
||
width: 40px;
|
||
height: 40px;
|
||
background: linear-gradient(45deg, #667eea, #764ba2);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
color: white;
|
||
font-size: 1.2rem;
|
||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
|
||
}
|
||
|
||
.layer-title {
|
||
font-size: 1.5rem;
|
||
font-weight: bold;
|
||
margin-bottom: 1rem;
|
||
color: #4ecdc4;
|
||
position: relative;
|
||
padding-left: 1rem;
|
||
}
|
||
|
||
.layer-title::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 4px;
|
||
height: 100%;
|
||
background: linear-gradient(to bottom, #4ecdc4, #44a08d);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.layer-content {
|
||
font-size: 1.1rem;
|
||
color: #d0d0d0;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.highlight {
|
||
background: linear-gradient(120deg, rgba(255, 107, 107, 0.3), rgba(78, 205, 196, 0.3));
|
||
padding: 0.2rem 0.5rem;
|
||
border-radius: 5px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.stars {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
z-index: -1;
|
||
}
|
||
|
||
.star {
|
||
position: absolute;
|
||
background: white;
|
||
border-radius: 50%;
|
||
animation: twinkle 3s infinite;
|
||
}
|
||
|
||
@keyframes gradientShift {
|
||
0%, 100% { background-position: 0% 50%; }
|
||
50% { background-position: 100% 50%; }
|
||
}
|
||
|
||
@keyframes fadeInUp {
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes twinkle {
|
||
0%, 100% { opacity: 0.3; }
|
||
50% { opacity: 1; }
|
||
}
|
||
|
||
.cosmic-bg {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.8) 70%);
|
||
pointer-events: none;
|
||
z-index: -2;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="cosmic-bg"></div>
|
||
<div class="stars" id="stars"></div>
|
||
|
||
<div class="container">
|
||
<div class="header">
|
||
<h1 class="title">黑洞</h1>
|
||
<p class="subtitle">从直观表象到本质洞察的十层认知之旅</p>
|
||
</div>
|
||
|
||
<div class="layer">
|
||
<div class="layer-number">1</div>
|
||
<div class="layer-title">直观表象</div>
|
||
<div class="layer-content">
|
||
在夜空中，黑洞是一个<span class="highlight">完全看不见的黑色区域</span>，就像宇宙中的一个洞。它吞噬一切光线，连光都无法逃脱，所以我们只能通过周围恒星的诡异运动来推测它的存在。想象一个巨大的隐形漩涡，疯狂地吸收着周围的一切物质。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layer">
|
||
<div class="layer-number">2</div>
|
||
<div class="layer-title">物理原理</div>
|
||
<div class="layer-content">
|
||
黑洞其实是<span class="highlight">引力极其强大的天体</span>。当一颗质量超过太阳25倍的恒星燃料耗尽时，会发生引力坍缩，核心被压缩到一个密度无限大的点——奇点。这个区域的引力强到连光的速度都无法达到逃逸速度，形成了"事件视界"这道不归路。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layer">
|
||
<div class="layer-number">3</div>
|
||
<div class="layer-title">数学描述</div>
|
||
<div class="layer-content">
|
||
爱因斯坦的广义相对论用<span class="highlight">时空弯曲</span>来描述黑洞。史瓦西解给出了球对称黑洞的精确数学描述：事件视界半径Rs = 2GM/c²。质量越大，事件视界越大。在这个边界内，时空弯曲得如此剧烈，以至于所有的路径都指向中心的奇点。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layer">
|
||
<div class="layer-number">4</div>
|
||
<div class="layer-title">反例质疑</div>
|
||
<div class="layer-content">
|
||
但等等，如果连光都无法逃脱，我们怎么能看到黑洞周围的<span class="highlight">吸积盘发光</span>？如果时间在事件视界附近极度变慢，那么掉入黑洞的物体在外界观察者看来是否永远不会真正越过边界？霍金辐射又是如何从"什么都逃不出来"的黑洞中产生的？
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layer">
|
||
<div class="layer-number">5</div>
|
||
<div class="layer-title">动态过程</div>
|
||
<div class="layer-content">
|
||
黑洞并非静态的"洞"，而是<span class="highlight">动态的时空结构</span>。物质在接近时被潮汐力拉伸成"意大利面条"，摩擦加热至数百万度而发光。黑洞通过霍金辐射缓慢蒸发，质量越小蒸发越快。它们还能合并，产生引力波，揭示了时空本身的震荡。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layer">
|
||
<div class="layer-number">6</div>
|
||
<div class="layer-title">信息悖论</div>
|
||
<div class="layer-content">
|
||
黑洞引发了物理学最深刻的悖论：<span class="highlight">信息悖论</span>。量子力学说信息不能被摧毁，但黑洞似乎永远吞噬了信息。当黑洞通过霍金辐射完全蒸发后，那些信息去哪了？这触及了量子力学与引力理论的根本冲突，可能需要全新的物理理论来解决。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layer">
|
||
<div class="layer-number">7</div>
|
||
<div class="layer-title">时空本质</div>
|
||
<div class="layer-content">
|
||
黑洞揭示了<span class="highlight">时空并非舞台，而是演员</span>。它不是空无一物的背景，而是能够弯曲、震荡、甚至撕裂的动态实体。在奇点处，我们的时空概念完全失效，这暗示着现实可能比我们想象的更加奇异——也许时空本身就是从更基本的东西中"涌现"出来的。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layer">
|
||
<div class="layer-number">8</div>
|
||
<div class="layer-title">全息原理</div>
|
||
<div class="layer-content">
|
||
最令人震惊的发现是<span class="highlight">全息原理</span>：黑洞的所有信息都可能编码在其二维表面上，而非三维内部。这意味着我们所感知的三维空间可能只是更低维信息的投影！就像全息图一样，现实的"体积"可能是一种错觉。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layer">
|
||
<div class="layer-number">9</div>
|
||
<div class="layer-title">宇宙演化</div>
|
||
<div class="layer-content">
|
||
黑洞是<span class="highlight">宇宙演化的关键角色</span>。它们塑造星系结构，调节恒星形成，甚至可能通过虫洞连接不同的时空区域。在多重宇宙理论中，黑洞内部可能孕育新的宇宙。它们不是破坏者，而是创造者和组织者。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layer">
|
||
<div class="layer-number">10</div>
|
||
<div class="layer-title">存在本质</div>
|
||
<div class="layer-content">
|
||
最终，黑洞教会我们<span class="highlight">存在的本质是关系和信息，而非物质</span>。它揭示了现实是一个相互连接的信息网络，其中"物质"、"能量"、"时间"和"空间"都只是这个更深层次结构的不同表现。黑洞是宇宙的镜子，反射出现实的终极本质——一切都是信息的舞蹈。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 创建星空背景
|
||
function createStars() {
|
||
const starsContainer = document.getElementById('stars');
|
||
const starCount = 200;
|
||
|
||
for (let i = 0; i < starCount; i++) {
|
||
const star = document.createElement('div');
|
||
star.className = 'star';
|
||
star.style.left = Math.random() * 100 + '%';
|
||
star.style.top = Math.random() * 100 + '%';
|
||
star.style.width = Math.random() * 3 + 1 + 'px';
|
||
star.style.height = star.style.width;
|
||
star.style.animationDelay = Math.random() * 3 + 's';
|
||
starsContainer.appendChild(star);
|
||
}
|
||
}
|
||
|
||
// 页面加载后创建星星
|
||
document.addEventListener('DOMContentLoaded', createStars);
|
||
|
||
// 为层级添加渐显效果
|
||
const layers = document.querySelectorAll('.layer');
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.style.animationPlayState = 'running';
|
||
}
|
||
});
|
||
});
|
||
|
||
layers.forEach(layer => {
|
||
observer.observe(layer);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|