392 lines
14 KiB
HTML
392 lines
14 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=Noto+Serif+SC:wght@300;400;600;700&display=swap');
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Noto Serif SC', serif;
|
|
background: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 100%);
|
|
color: #ffffff;
|
|
line-height: 1.6;
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.cosmos {
|
|
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 2s infinite alternate;
|
|
}
|
|
|
|
@keyframes twinkle {
|
|
0% { opacity: 0.3; transform: scale(1); }
|
|
100% { opacity: 1; transform: scale(1.2); }
|
|
}
|
|
|
|
.container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: 3rem;
|
|
padding: 2rem;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 20px;
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.title {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
background: linear-gradient(45deg, #64b5f6, #42a5f5, #2196f3);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
margin-bottom: 1rem;
|
|
text-shadow: 0 0 30px rgba(33, 150, 243, 0.5);
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.1rem;
|
|
color: #b0bec5;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.layer {
|
|
margin-bottom: 2rem;
|
|
padding: 2rem;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border-radius: 15px;
|
|
border-left: 4px solid;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.layer::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.02));
|
|
pointer-events: none;
|
|
}
|
|
|
|
.layer:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.layer-number {
|
|
display: inline-block;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
line-height: 2rem;
|
|
font-weight: 600;
|
|
margin-right: 1rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.layer-title {
|
|
font-size: 1.3rem;
|
|
font-weight: 600;
|
|
margin-bottom: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.layer-content {
|
|
font-size: 1rem;
|
|
line-height: 1.8;
|
|
color: #e8eaf6;
|
|
}
|
|
|
|
/* 不同层级的颜色主题 */
|
|
.layer:nth-child(1) { border-left-color: #ff6b6b; }
|
|
.layer:nth-child(1) .layer-number { background: #ff6b6b; }
|
|
|
|
.layer:nth-child(2) { border-left-color: #ffa726; }
|
|
.layer:nth-child(2) .layer-number { background: #ffa726; }
|
|
|
|
.layer:nth-child(3) { border-left-color: #ffeb3b; }
|
|
.layer:nth-child(3) .layer-number { background: #ffeb3b; color: #333; }
|
|
|
|
.layer:nth-child(4) { border-left-color: #66bb6a; }
|
|
.layer:nth-child(4) .layer-number { background: #66bb6a; }
|
|
|
|
.layer:nth-child(5) { border-left-color: #42a5f5; }
|
|
.layer:nth-child(5) .layer-number { background: #42a5f5; }
|
|
|
|
.layer:nth-child(6) { border-left-color: #ab47bc; }
|
|
.layer:nth-child(6) .layer-number { background: #ab47bc; }
|
|
|
|
.layer:nth-child(7) { border-left-color: #ec407a; }
|
|
.layer:nth-child(7) .layer-number { background: #ec407a; }
|
|
|
|
.layer:nth-child(8) { border-left-color: #26c6da; }
|
|
.layer:nth-child(8) .layer-number { background: #26c6da; }
|
|
|
|
.layer:nth-child(9) { border-left-color: #9ccc65; }
|
|
.layer:nth-child(9) .layer-number { background: #9ccc65; }
|
|
|
|
.layer:nth-child(10) { border-left-color: #ffd54f; }
|
|
.layer:nth-child(10) .layer-number { background: #ffd54f; color: #333; }
|
|
|
|
.essence {
|
|
margin-top: 3rem;
|
|
padding: 2.5rem;
|
|
background: linear-gradient(135deg, rgba(63, 81, 181, 0.1), rgba(33, 150, 243, 0.1));
|
|
border-radius: 20px;
|
|
border: 2px solid rgba(33, 150, 243, 0.3);
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.essence::before {
|
|
content: '✨';
|
|
position: absolute;
|
|
top: -15px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 2rem;
|
|
background: linear-gradient(135deg, #0f0f23, #1a1a3e);
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.essence-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
margin-bottom: 1rem;
|
|
color: #64b5f6;
|
|
}
|
|
|
|
.essence-content {
|
|
font-size: 1.1rem;
|
|
line-height: 1.8;
|
|
color: #e3f2fd;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.title {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.layer {
|
|
padding: 1.5rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="cosmos" id="cosmos"></div>
|
|
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1 class="title">星团</h1>
|
|
<p class="subtitle">从直观表象到本质洞察的十层认知之旅</p>
|
|
</div>
|
|
|
|
<div class="layer">
|
|
<div class="layer-title">
|
|
<span class="layer-number">1</span>
|
|
直观表象：夜空中的亮斑
|
|
</div>
|
|
<div class="layer-content">
|
|
抬头望向夜空，我们看到一些模糊的光斑，像是天空中撒落的钻石粉末。古人称之为"星宿"，以为是神灵居住的宫殿。这些光斑在肉眼看来就像一团雾气，朦胧而神秘。
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layer">
|
|
<div class="layer-title">
|
|
<span class="layer-number">2</span>
|
|
初步认知：恒星的集合
|
|
</div>
|
|
<div class="layer-content">
|
|
望远镜发明后，人们惊讶地发现，那些模糊的光斑原来是无数颗恒星聚集在一起！就像远看是一片森林，近看才发现是一棵棵树木。这些恒星因为距离遥远，所以看起来挤在一起。
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layer">
|
|
<div class="layer-title">
|
|
<span class="layer-number">3</span>
|
|
深入观察：不同类型的星团
|
|
</div>
|
|
<div class="layer-content">
|
|
进一步观测发现，星团并非都一样。有些像珍珠项链般疏松分布（疏散星团），有些则像蜂群般密集聚拢（球状星团）。疏散星团年轻活跃，球状星团古老庄重，各有各的"性格"。
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layer">
|
|
<div class="layer-title">
|
|
<span class="layer-number">4</span>
|
|
反例疑惑：为什么会聚集？
|
|
</div>
|
|
<div class="layer-content">
|
|
奇怪的是，按理说恒星应该各自独立运行，为什么会聚集成团？就像问为什么鸟儿要成群飞行一样。单纯的"距离近"无法解释这种现象，必定有更深层的原因在起作用。
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layer">
|
|
<div class="layer-title">
|
|
<span class="layer-number">5</span>
|
|
全新解释：引力的魔法
|
|
</div>
|
|
<div class="layer-content">
|
|
答案是万有引力！每颗恒星都在吸引着周围的伙伴，形成了一个"引力井"。就像一群人围着篝火，越靠近越温暖，恒星们也被彼此的引力"拥抱"在一起，形成了稳定的集体。
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layer">
|
|
<div class="layer-title">
|
|
<span class="layer-number">6</span>
|
|
动态平衡：宇宙中的舞蹈
|
|
</div>
|
|
<div class="layer-content">
|
|
星团不是静止的，而是在进行着优雅的宇宙芭蕾。每颗星都在轨道上翩翩起舞，有时靠近，有时远离，但整个星团保持着动态平衡。这就像一个永不停歇的舞会，每个舞者都有自己的节拍。
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layer">
|
|
<div class="layer-title">
|
|
<span class="layer-number">7</span>
|
|
生命周期：恒星的摇篮与坟场
|
|
</div>
|
|
<div class="layer-content">
|
|
星团是恒星的"托儿所"和"养老院"。年轻的疏散星团孕育着新生的恒星，就像产房里的婴儿；古老的球状星团则聚集着年迈的恒星，像是宇宙中的养老社区。它们见证着恒星从诞生到死亡的全过程。
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layer">
|
|
<div class="layer-title">
|
|
<span class="layer-number">8</span>
|
|
物理工厂：元素的锻造车间
|
|
</div>
|
|
<div class="layer-content">
|
|
星团是宇宙的"物理工厂"。恒星在其中燃烧氢气，制造氦气，再进一步锻造出碳、氧、铁等重元素。当恒星死亡时，这些元素会散布到宇宙中，成为下一代恒星和行星的原料。我们身体里的每个原子，都曾在某个星团中被锻造过！
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layer">
|
|
<div class="layer-title">
|
|
<span class="layer-number">9</span>
|
|
宇宙演化：时间的见证者
|
|
</div>
|
|
<div class="layer-content">
|
|
不同年龄的星团就像宇宙的"化石"，记录着宇宙演化的历史。通过研究它们，我们能够"看到"宇宙在不同时期的模样。球状星团是宇宙的"老人"，它们见证了宇宙从青春期到现在的全过程。
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layer">
|
|
<div class="layer-title">
|
|
<span class="layer-number">10</span>
|
|
本质洞察：宇宙结构的基本单元
|
|
</div>
|
|
<div class="layer-content">
|
|
最终我们发现，星团不仅仅是恒星的集合，它们是宇宙结构层次中的基本单元。从原子到分子，从行星到恒星，从星团到星系，宇宙是一个层层嵌套的结构。星团揭示了宇宙从混沌到秩序的基本规律：引力创造结构，结构孕育复杂性，复杂性催生生命。
|
|
</div>
|
|
</div>
|
|
|
|
<div class="essence">
|
|
<div class="essence-title">本质洞察</div>
|
|
<div class="essence-content">
|
|
星团是宇宙的"社会"——它展示了从个体到集体的演化逻辑。正如人类从个体发展出家庭、部落、国家，恒星也从孤独的个体发展出星团、星系、星系团。这种"聚集"不是偶然，而是宇宙中普遍存在的组织原理：引力创造秩序，秩序孕育复杂性，复杂性最终可能孕育出生命和意识。我们仰望星空时，看到的不仅是遥远的光点，更是宇宙自我组织的奇迹。
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 创建星空背景
|
|
function createStars() {
|
|
const cosmos = document.getElementById('cosmos');
|
|
const starCount = 150;
|
|
|
|
for (let i = 0; i < starCount; i++) {
|
|
const star = document.createElement('div');
|
|
star.className = 'star';
|
|
|
|
const size = Math.random() * 3 + 1;
|
|
const x = Math.random() * window.innerWidth;
|
|
const y = Math.random() * window.innerHeight;
|
|
const animationDelay = Math.random() * 2;
|
|
|
|
star.style.width = `${size}px`;
|
|
star.style.height = `${size}px`;
|
|
star.style.left = `${x}px`;
|
|
star.style.top = `${y}px`;
|
|
star.style.animationDelay = `${animationDelay}s`;
|
|
|
|
cosmos.appendChild(star);
|
|
}
|
|
}
|
|
|
|
// 层级动画
|
|
function animateLayers() {
|
|
const layers = document.querySelectorAll('.layer');
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.opacity = '1';
|
|
entry.target.style.transform = 'translateY(0)';
|
|
}
|
|
});
|
|
});
|
|
|
|
layers.forEach((layer, index) => {
|
|
layer.style.opacity = '0';
|
|
layer.style.transform = 'translateY(30px)';
|
|
layer.style.transition = `all 0.6s ease ${index * 0.1}s`;
|
|
observer.observe(layer);
|
|
});
|
|
}
|
|
|
|
// 初始化
|
|
window.addEventListener('load', () => {
|
|
createStars();
|
|
animateLayers();
|
|
});
|
|
|
|
// 窗口大小改变时重新创建星星
|
|
window.addEventListener('resize', () => {
|
|
document.getElementById('cosmos').innerHTML = '';
|
|
createStars();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|