脚本网页地球演化-育师

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>地球生命演化史诗</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; background: #000; color: #fff; overflow-x: hidden; position: relative; height: 100vh; overscroll-behavior: none; } /* 星空背景 */ .stars-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, #000428 0%, #004e92 100%); z-index: -2; } .stars { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .star { position: absolute; background: white; border-radius: 50%; animation: twinkle 3s infinite; } @keyframes twinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } /* 页面容器 */ .page { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; overflow-y: auto; padding-bottom: 20px; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .page.active { transform: translateX(0); } /* 头部 */ .header { position: sticky; top: 0; padding: 15px; background: linear-gradient(to bottom, rgba(0,0,0,0.95), rgba(0,0,0,0.8)); z-index: 100; backdrop-filter: blur(10px); display: flex; justify-content: space-between; align-items: center; } .header-content { flex: 1; } .header h1 { font-size: 1.5rem; font-weight: bold; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 3px; } .header p { font-size: 0.8rem; color: rgba(255,255,255,0.7); } /* 页面切换按钮 - 右上角 */ .page-switcher { display: flex; background: rgba(255,255,255,0.1); border-radius: 15px; padding: 3px; border: 1px solid rgba(255,255,255,0.2); } .switch-btn { padding: 6px 12px; background: transparent; border: none; color: rgba(255,255,255,0.6); cursor: pointer; transition: all 0.3s ease; font-size: 0.75rem; border-radius: 12px; outline: none; } .switch-btn.active { background: linear-gradient(135deg, #667eea, #764ba2); color: white; box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4); } /* 时间线容器 - 更紧凑 */ .timeline-container { padding: 10px 15px; } .timeline { position: relative; padding-left: 30px; } .timeline::before { content: ''; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, #667eea, #764ba2, #f093fb); } /* 事件卡片 - 紧凑版 */ .event { position: relative; margin-bottom: 15px; opacity: 0; transform: translateX(-20px); animation: slideIn 0.4s forwards; } @keyframes slideIn { to { opacity: 1; transform: translateX(0); } } .event::before { content: ''; position: absolute; left: -30px; top: 15px; width: 8px; height: 8px; background: #fff; border: 2px solid #667eea; border-radius: 50%; box-shadow: 0 0 10px rgba(102, 126, 234, 0.8); } .event-card { background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; padding: 10px 12px; transition: all 0.3s ease; cursor: pointer; } .event-card:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06)); } .event-time { display: inline-block; background: linear-gradient(135deg, #667eea, #764ba2); padding: 2px 8px; border-radius: 12px; font-size: 0.65rem; font-weight: bold; margin-bottom: 5px; } .event-title { font-size: 0.95rem; font-weight: bold; margin-bottom: 4px; line-height: 1.2; } .event-desc { font-size: 0.75rem; color: rgba(255,255,255,0.7); line-height: 1.3; } /* 特殊事件样式 */ .event.major .event-card { background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15)); border: 1.5px solid rgba(102, 126, 234, 0.4); } .event.major::before { width: 12px; height: 12px; background: linear-gradient(135deg, #667eea, #764ba2); } /* 人类时代特殊样式 */ .event.human-era .event-card { background: linear-gradient(135deg, rgba(255, 107, 107, 0.15), rgba(255, 193, 7, 0.15)); border: 1.5px solid rgba(255, 107, 107, 0.4); } .event.human-era::before { background: linear-gradient(135deg, #ff6b6b, #ffc107); } /* 滚动条样式 */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); } ::-webkit-scrollbar-thumb { background: rgba(102, 126, 234, 0.5); border-radius: 2px; } /* 响应式调整 */ @media (max-width: 380px) { .header h1 { font-size: 1.3rem; } .header p { font-size: 0.75rem; } .switch-btn { padding: 5px 10px; font-size: 0.7rem; } .event-title { font-size: 0.9rem; } .event-desc { font-size: 0.7rem; } } /* 页面切换动画指示器 */ .page-indicator { position: fixed; top: 50%; left: 10px; transform: translateY(-50%); z-index: 99; display: flex; flex-direction: column; gap: 8px; } .indicator-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.3); transition: all 0.3s ease; cursor: pointer; } .indicator-dot.active { width: 20px; border-radius: 3px; background: linear-gradient(135deg, #667eea, #764ba2); } </style> </head> <body> <!-- 星空背景 --> <div class="stars-bg"></div> <div class="stars" id="stars"></div> <!-- 页面指示器 --> <div class="page-indicator"> <div class="indicator-dot active" onclick="switchPage(1)"></div> <div class="indicator-dot" onclick="switchPage(2)"></div> </div> <!-- 页面1：地球诞生到恐龙灭绝 --> <div class="page active" id="page1"> <div class="header"> <div class="header-content"> <h1>地球生命演化史诗</h1> <p>第一部分：从混沌到霸主</p> </div> <div class="page-switcher"> <button class="switch-btn active" onclick="switchPage(1)">远古</button> <button class="switch-btn" onclick="switchPage(2)">人类</button> </div> </div> <div class="timeline-container"> <div class="timeline" id="timeline1"></div> </div> </div> <!-- 页面2：人类演化 --> <div class="page" id="page2"> <div class="header"> <div class="header-content"> <h1>人类文明崛起</h1> <p>第二部分：智慧之火</p> </div> <div class="page-switcher"> <button class="switch-btn active" onclick="switchPage(1)">远古</button> <button class="switch-btn" onclick="switchPage(2)">人类</button> </div> </div> <div class="timeline-container"> <div class="timeline" id="timeline2"></div> </div> </div> <script> // 事件数据 - 分成两页 const page1Events = [ { time: "00:00", title: "地球诞生", desc: "地表被狂暴的岩浆和陨石雨覆盖，宛如人间炼狱。", major: true }, { time: "00:28:10", title: "月球形成", desc: "忒伊亚星体与地球碰撞，地幔物质聚合形成月球。" }, { time: "01:33:54", title: "古海洋形成", desc: "地球降温，液态水出现并淹没地球。" }, { time: "03:08", title: "生命之祖LUCA", desc: "所有生物的共同祖先出现。" }, { time: "05:44", title: "蓝细菌出现", desc: "光合作用释放氧气，改变地球大气。" }, { time: "11:28:42", title: "大氧化事件", desc: "氧气含量上升，厌氧生物大量灭绝。" }, { time: "15:32:30", title: "真核生物出现", desc: "复杂细胞结构，多细胞演化的关键。" }, { time: "20:14:36", title: "雪球地球", desc: "地球几乎被冰雪覆盖，生命在绝境中进化。" }, { time: "20:30", title: "海绵出现", desc: "第一种多细胞动物，开启分工合作。" }, { time: "20:38:35", title: "埃迪卡拉纪", desc: "神秘软体生物出现。" }, { time: "21:10:37", title: "寒武纪大爆发", desc: "大量生物出现，捕食关系确立。", major: true }, { time: "21:30:55", title: "生命登陆", desc: "地衣分解岩石形成土壤。" }, { time: "21:38:51", title: "奥陶纪大灭绝", desc: "大冰期导致浅海生物灭绝。" }, { time: "21:48", title: "陆地植物", desc: "所有陆生高等植物的祖先。" }, { time: "22:01:03", title: "鱼类登陆", desc: "四足动物出现，脊椎动物登上陆地。" }, { time: "22:03:33", title: "泥盆纪大灭绝", desc: "海水缺氧，海洋生物大量灭绝。" }, { time: "22:24", title: "石炭纪", desc: "巨型蕨类覆盖陆地，巨型节肢动物出现。" }, { time: "22:41:07", title: "二叠纪大灭绝", desc: "史上最严重灭绝，96%海洋物种消失。", major: true }, { time: "22:46:39", title: "恐龙出现", desc: "早期恐龙并不起眼。" }, { time: "22:56:58", title: "三叠纪大灭绝", desc: "为恐龙崛起铺平道路。" }, { time: "22:57", title: "恐龙繁盛", desc: "统治地球1.6亿年。" }, { time: "23:12", title: "鸟类出现", desc: "恐龙进化出羽毛和翅膀。" }, { time: "23:39:20", title: "白垩纪大灭绝", desc: "小行星撞击，非鸟恐龙灭绝。", major: true } ]; const page2Events = [ { time: "23:58:37", title: "地猿始祖种", desc: "开始直立行走，人类演化开端。", human: true, major: true }, { time: "23:59", title: "露西", desc: "阿法南方古猿，人族基石。", human: true }, { time: "23:59:13", title: "能人", desc: "首个制造石器的人族，人属起点。", human: true }, { time: "23:59:23", title: "匠人", desc: "早期直立人，开始迁出非洲。", human: true }, { time: "23:59:45", title: "海德堡人", desc: "脑容量接近现代人，团体狩猎。", human: true }, { time: "23:59:52", title: "尼安德特人", desc: "早期智人，适应寒冷气候。", human: true }, { time: "23:59:54", title: "晚期智人", desc: "现代人真正的祖先。", human: true }, { time: "最后三秒", title: "走出非洲", desc: "智人扩散全球，与其他人种混血。", human: true }, { time: "最后一秒", title: "人类时代", desc: "智慧文明诞生，成为地球主宰。", human: true, major: true } ]; // 生成星空 function createStars() { const starsContainer = document.getElementById('stars'); const starCount = 80; 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() * 2 + 'px'; star.style.height = star.style.width; star.style.animationDelay = Math.random() * 3 + 's'; starsContainer.appendChild(star); } } // 生成时间线 function generateTimeline(containerId, events) { const container = document.getElementById(containerId); events.forEach((event, index) => { const eventDiv = document.createElement('div'); eventDiv.className = 'event'; if (event.major) eventDiv.classList.add('major'); if (event.human) eventDiv.classList.add('human-era'); eventDiv.style.animationDelay = `${index * 0.03}s`; eventDiv.innerHTML = ` <div class="event-card"> <span class="event-time">${event.time}</span> <div class="event-title">${event.title}</div> <div class="event-desc">${event.desc}</div> </div> `; container.appendChild(eventDiv); }); } // 切换页面 function switchPage(pageNum) { const pages = document.querySelectorAll('.page'); const switchBtns = document.querySelectorAll('.switch-btn'); const indicatorDots = document.querySelectorAll('.indicator-dot'); pages.forEach(page => page.classList.remove('active')); switchBtns.forEach(btn => btn.classList.remove('active')); indicatorDots.forEach(dot => dot.classList.remove('active')); if (pageNum === 1) { document.getElementById('page1').classList.add('active'); switchBtns[0].classList.add('active'); indicatorDots[0].classList.add('active'); } else { document.getElementById('page2').classList.add('active'); switchBtns[1].classList.add('active'); indicatorDots[1].classList.add('active'); } } // 初始化 document.addEventListener('DOMContentLoaded', function() { createStars(); generateTimeline('timeline1', page1Events); generateTimeline('timeline2', page2Events); // 添加点击事件 document.querySelectorAll('.event-card').forEach(card => { card.addEventListener('click', function() { this.style.transform = 'scale(0.98)'; setTimeout(() => { this.style.transform = ''; }, 150); }); }); // 添加滑动手势支持 let touchStartX = 0; let touchEndX = 0; document.addEventListener('touchstart', e => { touchStartX = e.changedTouches[0].screenX; }); document.addEventListener('touchend', e => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }); function handleSwipe() { const swipeThreshold = 50; const diff = touchStartX - touchEndX; if (Math.abs(diff) > swipeThreshold) { if (diff > 0) { // 向左滑动 - 切换到下一页 if (document.getElementById('page1').classList.contains('active')) { switchPage(2); } } else { // 向右滑动 - 切换到上一页 if (document.getElementById('page2').classList.contains('active')) { switchPage(1); } } } } }); </script> </body> </html>
脚本网页地球演化

AXI-A7.4.9 Atomic transaction dependencies

【AI黑科技】6.89%性能炸裂！ASFR框架让知识图谱“开天眼“，小白程序员也能玩转大模型增强技术

Google最新AI Agents课程全解析！337页白皮书浓缩精华，从入门到精通，手把手教你成为Agent开发大神！

介观交通流仿真软件：Aimsun Next_（10）.动态交通分配

C语言学习第四天

通信工程毕设易上手课题指导
