452 lines
18 KiB
HTML
452 lines
18 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, #1a1a2e 0%, #16213e 25%, #0f3460 50%, #533483 75%, #7b2cbf 100%);
|
||
color: #e8e8e8;
|
||
line-height: 1.8;
|
||
min-height: 100vh;
|
||
overflow-x: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.time-particles {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
z-index: -1;
|
||
}
|
||
|
||
.particle {
|
||
position: absolute;
|
||
width: 2px;
|
||
height: 2px;
|
||
background: rgba(255, 255, 255, 0.6);
|
||
border-radius: 50%;
|
||
animation: float 15s linear infinite;
|
||
}
|
||
|
||
.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: 3.5rem;
|
||
background: linear-gradient(45deg, #ff9a9e, #fecfef, #fecfef, #ffd6cc);
|
||
background-size: 400% 400%;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
animation: gradientShift 6s ease-in-out infinite;
|
||
margin-bottom: 0.5rem;
|
||
text-shadow: 0 0 30px rgba(255, 154, 158, 0.5);
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 1.2rem;
|
||
color: #d4a4eb;
|
||
margin-bottom: 2rem;
|
||
font-style: italic;
|
||
}
|
||
|
||
.clock-container {
|
||
position: absolute;
|
||
top: -100px;
|
||
right: -50px;
|
||
width: 150px;
|
||
height: 150px;
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.clock-face {
|
||
width: 100%;
|
||
height: 100%;
|
||
border: 3px solid rgba(255, 255, 255, 0.3);
|
||
border-radius: 50%;
|
||
position: relative;
|
||
background: radial-gradient(circle, rgba(255,255,255,0.1), transparent);
|
||
}
|
||
|
||
.clock-hand {
|
||
position: absolute;
|
||
background: rgba(255, 255, 255, 0.7);
|
||
border-radius: 2px;
|
||
transform-origin: bottom center;
|
||
left: 50%;
|
||
}
|
||
|
||
.hour-hand {
|
||
width: 4px;
|
||
height: 40px;
|
||
top: 35px;
|
||
margin-left: -2px;
|
||
animation: rotate 43200s linear infinite;
|
||
}
|
||
|
||
.minute-hand {
|
||
width: 2px;
|
||
height: 50px;
|
||
top: 25px;
|
||
margin-left: -1px;
|
||
animation: rotate 3600s linear infinite;
|
||
}
|
||
|
||
.layer {
|
||
background: rgba(255, 255, 255, 0.08);
|
||
backdrop-filter: blur(15px);
|
||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||
border-radius: 20px;
|
||
padding: 2.5rem;
|
||
margin-bottom: 2rem;
|
||
transform: translateY(30px);
|
||
opacity: 0;
|
||
animation: fadeInUp 1s ease forwards;
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
.layer:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 15px 40px rgba(123, 44, 191, 0.3);
|
||
}
|
||
|
||
.layer:nth-child(odd) {
|
||
animation-delay: 0.1s;
|
||
}
|
||
|
||
.layer:nth-child(even) {
|
||
animation-delay: 0.2s;
|
||
}
|
||
|
||
.layer-number {
|
||
position: absolute;
|
||
top: -15px;
|
||
right: 25px;
|
||
width: 50px;
|
||
height: 50px;
|
||
background: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #f5576c);
|
||
background-size: 300% 300%;
|
||
animation: gradientShift 4s ease-in-out infinite;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
color: white;
|
||
font-size: 1.3rem;
|
||
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
|
||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
.layer-title {
|
||
font-size: 1.6rem;
|
||
font-weight: bold;
|
||
margin-bottom: 1rem;
|
||
color: #ffd6cc;
|
||
position: relative;
|
||
padding-left: 1.5rem;
|
||
}
|
||
|
||
.layer-title::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 6px;
|
||
height: 100%;
|
||
background: linear-gradient(to bottom, #ffd6cc, #ff9a9e);
|
||
border-radius: 3px;
|
||
box-shadow: 0 0 10px rgba(255, 214, 204, 0.5);
|
||
}
|
||
|
||
.layer-content {
|
||
font-size: 1.1rem;
|
||
color: #e8e8e8;
|
||
line-height: 1.9;
|
||
}
|
||
|
||
.highlight {
|
||
background: linear-gradient(120deg, rgba(255, 154, 158, 0.4), rgba(254, 207, 239, 0.4));
|
||
padding: 0.3rem 0.6rem;
|
||
border-radius: 8px;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
border: 1px solid rgba(255, 154, 158, 0.3);
|
||
}
|
||
|
||
.time-flow {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent 0%, rgba(255, 154, 158, 0.1) 50%, transparent 100%);
|
||
animation: timeFlow 8s ease-in-out infinite;
|
||
pointer-events: none;
|
||
}
|
||
|
||
@keyframes gradientShift {
|
||
0%, 100% { background-position: 0% 50%; }
|
||
50% { background-position: 100% 50%; }
|
||
}
|
||
|
||
@keyframes fadeInUp {
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes float {
|
||
0% {
|
||
transform: translateY(100vh) translateX(0);
|
||
opacity: 0;
|
||
}
|
||
10% {
|
||
opacity: 1;
|
||
}
|
||
90% {
|
||
opacity: 1;
|
||
}
|
||
100% {
|
||
transform: translateY(-100vh) translateX(50px);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@keyframes rotate {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
@keyframes timeFlow {
|
||
0%, 100% { transform: translateX(-100%); }
|
||
50% { transform: translateX(100%); }
|
||
}
|
||
|
||
.philosophical-quote {
|
||
text-align: center;
|
||
font-style: italic;
|
||
color: #d4a4eb;
|
||
font-size: 1.1rem;
|
||
margin: 3rem 0;
|
||
padding: 1.5rem;
|
||
background: rgba(212, 164, 235, 0.1);
|
||
border-radius: 15px;
|
||
border: 1px solid rgba(212, 164, 235, 0.3);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="time-particles" id="timeParticles"></div>
|
||
|
||
<div class="container">
|
||
<div class="header">
|
||
<div class="clock-container">
|
||
<div class="clock-face">
|
||
<div class="clock-hand hour-hand"></div>
|
||
<div class="clock-hand minute-hand"></div>
|
||
</div>
|
||
</div>
|
||
<h1 class="title">时间</h1>
|
||
<p class="subtitle">从流逝感知到存在本质的认知之旅</p>
|
||
</div>
|
||
|
||
<div class="layer">
|
||
<div class="time-flow"></div>
|
||
<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="time-flow"></div>
|
||
<div class="layer-number">2</div>
|
||
<div class="layer-title">物理测量</div>
|
||
<div class="layer-content">
|
||
科学告诉我们，时间是<span class="highlight">可以精确测量的物理量</span>。从日晷到原子钟，我们用越来越精确的方式测量时间间隔。现代定义一秒为铯原子基态超精细能级跃迁9,192,631,770次所需的时间。时间成为了牛顿力学中绝对的、均匀流逝的参数，与空间并列为宇宙的基本框架。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layer">
|
||
<div class="time-flow"></div>
|
||
<div class="layer-number">3</div>
|
||
<div class="layer-title">相对论冲击</div>
|
||
<div class="layer-content">
|
||
爱因斯坦的相对论彻底颠覆了我们对时间的理解。时间不再是绝对的，而是<span class="highlight">相对的、可变的</span>。高速运动和强引力场会让时间变慢——这不是幻觉，而是时间本身的性质。时间与空间融合为"时空"，成为一个可以弯曲、拉伸的四维结构。双生子悖论告诉我们，时间真的可以"不同步"。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layer">
|
||
<div class="time-flow"></div>
|
||
<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="time-flow"></div>
|
||
<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="time-flow"></div>
|
||
<div class="layer-number">6</div>
|
||
<div class="layer-title">意识的时间</div>
|
||
<div class="layer-content">
|
||
最神秘的是<span class="highlight">意识中的时间体验</span>。我们的"现在"是一个约3秒钟的窗口，大脑不断地重构过去、预测未来，创造出连续的时间感。神经科学发现，时间不是被感知的，而是被构建的——不同的脑区处理不同时间尺度的信息，最后合成为统一的时间体验。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layer">
|
||
<div class="time-flow"></div>
|
||
<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="time-flow"></div>
|
||
<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="time-flow"></div>
|
||
<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="time-flow"></div>
|
||
<div class="layer-number">10</div>
|
||
<div class="layer-title">存在的本质</div>
|
||
<div class="layer-content">
|
||
最终，时间揭示了<span class="highlight">存在的本质是变化和关系</span>。没有绝对的存在，只有相对的变化。时间不是容器，而是存在的方式——是事物相互作用、信息交换、意识体验的过程本身。我们不是"在"时间中存在，而是"作为"时间而存在。当我们深刻理解时间，我们就理解了存在的动态本质——一切都是过程，一切都是关系，一切都是变化。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="philosophical-quote">
|
||
"时间是存在的节拍，意识是时间的见证者，而变化是万物的本质。"
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 创建时间粒子效果
|
||
function createTimeParticles() {
|
||
const particlesContainer = document.getElementById('timeParticles');
|
||
const particleCount = 150;
|
||
|
||
for (let i = 0; i < particleCount; i++) {
|
||
const particle = document.createElement('div');
|
||
particle.className = 'particle';
|
||
particle.style.left = Math.random() * 100 + '%';
|
||
particle.style.animationDelay = Math.random() * 15 + 's';
|
||
particle.style.animationDuration = (Math.random() * 10 + 10) + 's';
|
||
|
||
// 随机大小和透明度
|
||
const size = Math.random() * 3 + 1;
|
||
particle.style.width = size + 'px';
|
||
particle.style.height = size + 'px';
|
||
particle.style.opacity = Math.random() * 0.7 + 0.3;
|
||
|
||
particlesContainer.appendChild(particle);
|
||
}
|
||
}
|
||
|
||
// 页面加载后创建粒子
|
||
document.addEventListener('DOMContentLoaded', createTimeParticles);
|
||
|
||
// 滚动时的视差效果
|
||
window.addEventListener('scroll', () => {
|
||
const scrolled = window.pageYOffset;
|
||
const particles = document.querySelectorAll('.particle');
|
||
particles.forEach((particle, index) => {
|
||
const speed = (index % 5 + 1) * 0.1;
|
||
particle.style.transform = `translateY(${scrolled * speed}px)`;
|
||
});
|
||
});
|
||
|
||
// 为层级添加交互观察
|
||
const layers = document.querySelectorAll('.layer');
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.style.animationPlayState = 'running';
|
||
}
|
||
});
|
||
}, { threshold: 0.1 });
|
||
|
||
layers.forEach(layer => {
|
||
observer.observe(layer);
|
||
});
|
||
|
||
// 实时更新时钟
|
||
function updateClock() {
|
||
const now = new Date();
|
||
const hours = now.getHours() % 12;
|
||
const minutes = now.getMinutes();
|
||
|
||
const hourHand = document.querySelector('.hour-hand');
|
||
const minuteHand = document.querySelector('.minute-hand');
|
||
|
||
if (hourHand && minuteHand) {
|
||
const hourAngle = (hours * 30) + (minutes * 0.5);
|
||
const minuteAngle = minutes * 6;
|
||
|
||
hourHand.style.transform = `rotate(${hourAngle}deg)`;
|
||
minuteHand.style.transform = `rotate(${minuteAngle}deg)`;
|
||
}
|
||
}
|
||
|
||
// 每秒更新时钟
|
||
setInterval(updateClock, 1000);
|
||
updateClock(); // 立即执行一次
|
||
</script>
|
||
</body>
|
||
</html>
|