脚本网页地球演化

html 复制代码
<!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>
脚本网页 地球演化

脚本网页地球演化
