元神(1)

userId_undefined

༺ཌༀ我要上清华ༀད༻

贪心·贪心尝试者空间掌握者循环·循环打卡人枚举·枚举小能手

2025-10-07 15:15:27

发布于：安徽

6阅读
0回复
0点赞

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原神 - 提瓦特大陆</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Three.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<!-- GSAP 动画库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<!-- ScrollReveal -->
<script src="https://unpkg.com/scrollreveal"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

    :root {
        --primary-color: #1a365d;
        --secondary-color: #3182ce;
        --accent-color: #9f7aea;
        --element-anemo: #7dd3fc;
        --element-geo: #f59e0b;
        --element-electro: #8b5cf6;
        --element-dendro: #84cc16;
        --element-hydro: #3b82f6;
        --element-pyro: #ef4444;
        --element-cryo: #06b6d4;
    }
    
    body {
        font-family: 'Noto Sans SC', sans-serif;
        background-color: #0f172a;
        color: #f8fafc;
        overflow-x: hidden;
    }
    
    .bg-gradient-genshin {
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    }
    
    .element-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 8px;
    }
    
    .element-anemo {
        background-color: var(--element-anemo);
    }
    
    .element-geo {
        background-color: var(--element-geo);
    }
    
    .element-electro {
        background-color: var(--element-electro);
    }
    
    .element-dendro {
        background-color: var(--element-dendro);
    }
    
    .element-hydro {
        background-color: var(--element-hydro);
    }
    
    .element-pyro {
        background-color: var(--element-pyro);
    }
    
    .element-cryo {
        background-color: var(--element-cryo);
    }
    
    .character-card {
        background: rgba(30, 41, 59, 0.8);
        border-radius: 12px;
        overflow: hidden;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .character-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    }
    
    .character-card img {
        transition: all 0.5s ease;
    }
    
    .character-card:hover img {
        transform: scale(1.05);
    }
    
    .weapon-icon {
        width: 24px;
        height: 24px;
        margin-right: 4px;
    }
    
    .region-icon {
        width: 24px;
        height: 24px;
        margin-right: 4px;
    }
    
    .element-reaction-container {
        position: relative;
        width: 100%;
        height: 500px;
        overflow: hidden;
    }
    
    #elementReactionCanvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    .reaction-info {
        position: absolute;
        bottom: 20px;
        left: 20px;
        background: rgba(15, 23, 42, 0.8);
        border-radius: 8px;
        padding: 16px;
        max-width: 300px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .timeline-item {
        position: relative;
        padding-left: 30px;
        margin-bottom: 24px;
    }
    
    .timeline-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: var(--secondary-color);
        border: 2px solid #fff;
    }
    
    .timeline-item::after {
        content: '';
        position: absolute;
        left: 7px;
        top: 16px;
        width: 2px;
        height: calc(100% + 8px);
        background-color: rgba(255, 255, 255, 0.2);
    }
    
    .timeline-item:last-child::after {
        display: none;
    }
    
    .nav-link {
        position: relative;
        padding: 8px 16px;
        color: #cbd5e1;
        transition: all 0.3s ease;
    }
    
    .nav-link:hover {
        color: #fff;
    }
    
    .nav-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background-color: var(--accent-color);
        transition: all 0.3s ease;
    }
    
    .nav-link:hover::after,
    .nav-link.active::after {
        width: 80%;
    }
    
    .nav-link.active {
        color: #fff;
        font-weight: 500;
    }
    
    .element-selector {
        display: flex;
        gap: 12px;
        margin-bottom: 24px;
        flex-wrap: wrap;
    }
    
    .element-btn {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        border: 2px solid transparent;
    }
    
    .element-btn:hover,
    .element-btn.selected {
        transform: scale(1.1);
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
        border-color: #fff;
    }
    
    .element-btn img {
        width: 32px;
        height: 32px;
    }
    
    .reaction-result {
        background: rgba(30, 41, 59, 0.8);
        border-radius: 12px;
        padding: 24px;
        margin-top: 24px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        display: none;
    }
    
    .reaction-result.active {
        display: block;
        animation: fadeIn 0.5s ease;
    }
    
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .world-map {
        position: relative;
        width: 100%;
        height: 600px;
        background-image: url('https://p11-doubao-search-sign.byteimg.com/labis/93973a3d1870030689eda641abf2cfac~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765005047&x-signature=n3DvbsclSzcIbf2v7JPm6nfAtV0%3D');
        background-size: cover;
        background-position: center;
        border-radius: 12px;
        overflow: hidden;
    }
    
    .region-marker {
        position: absolute;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }
    
    .region-marker:hover {
        transform: scale(1.2);
    }
    
    .region-marker.mondstadt {
        top: 30%;
        left: 25%;
        background-color: var(--element-anemo);
    }
    
    .region-marker.liyue {
        top: 40%;
        left: 45%;
        background-color: var(--element-geo);
    }
    
    .region-marker.inazuma {
        top: 35%;
        left: 70%;
        background-color: var(--element-electro);
    }
    
    .region-marker.sumeru {
        top: 60%;
        left: 55%;
        background-color: var(--element-dendro);
    }
    
    .region-marker.fontaine {
        top: 30%;
        left: 60%;
        background-color: var(--element-hydro);
    }
    
    .region-info {
        position: absolute;
        top: 20px;
        right: 20px;
        background: rgba(15, 23, 42, 0.8);
        border-radius: 8px;
        padding: 16px;
        max-width: 300px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        display: none;
    }
    
    .region-info.active {
        display: block;
        animation: fadeIn 0.5s ease;
    }
    
    .filter-container {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 24px;
    }
    
    .filter-btn {
        padding: 8px 16px;
        border-radius: 20px;
        background-color: rgba(30, 41, 59, 0.8);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.1);
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .filter-btn:hover,
    .filter-btn.active {
        background-color: var(--secondary-color);
        border-color: var(--secondary-color);
    }
    
    .character-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 24px;
    }
    
    @media (max-width: 768px) {
        .character-grid {
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        }
        
        .element-reaction-container {
            height: 350px;
        }
        
        .world-map {
            height: 400px;
        }
    }
    
    @media (max-width: 640px) {
        .character-grid {
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        }
        
        .element-reaction-container {
            height: 300px;
        }
        
        .world-map {
            height: 350px;
        }
    }
    
    /* 加载动画 */
    .loader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #0f172a;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        transition: opacity 0.5s ease, visibility 0.5s ease;
    }
    
    .loader.hidden {
        opacity: 0;
        visibility: hidden;
    }
    
    .loader-icon {
        width: 80px;
        height: 80px;
        position: relative;
    }
    
    .loader-icon div {
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: var(--secondary-color);
        animation: loaderAnimation 1.2s linear infinite;
    }
    
    .loader-icon div:nth-child(1) {
        top: 8px;
        left: 8px;
        animation-delay: 0s;
    }
    
    .loader-icon div:nth-child(2) {
        top: 8px;
        left: 32px;
        animation-delay: -0.4s;
    }
    
    .loader-icon div:nth-child(3) {
        top: 8px;
        left: 56px;
        animation-delay: -0.8s;
    }
    
    .loader-icon div:nth-child(4) {
        top: 32px;
        left: 8px;
        animation-delay: -0.4s;
    }
    
    .loader-icon div:nth-child(5) {
        top: 32px;
        left: 32px;
        animation-delay: -0.8s;
    }
    
    .loader-icon div:nth-child(6) {
        top: 32px;
        left: 56px;
        animation-delay: -1.2s;
    }
    
    .loader-icon div:nth-child(7) {
        top: 56px;
        left: 8px;
        animation-delay: -0.8s;
    }
    
    .loader-icon div:nth-child(8) {
        top: 56px;
        left: 32px;
        animation-delay: -1.2s;
    }
    
    .loader-icon div:nth-child(9) {
        top: 56px;
        left: 56px;
        animation-delay: -1.6s;
    }
    
    @keyframes loaderAnimation {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.5;
        }
    }
    
    /* 滚动条样式 */
    ::-webkit-scrollbar {
        width: 8px;
    }
    
    ::-webkit-scrollbar-track {
        background: #1e293b;
    }
    
    ::-webkit-scrollbar-thumb {
        background: #475569;
        border-radius: 4px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: #64748b;
    }
</style>

</head>
<body class="bg-gradient-genshin min-h-screen">
<!-- 加载动画 -->
<div class="loader">
<div class="loader-icon">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>

<!-- 导航栏 -->
<nav class="bg-opacity-80 bg-gray-900 backdrop-blur-md fixed w-full z-50 border-b border-gray-800">
    <div class="container mx-auto px-4 py-3">
        <div class="flex justify-between items-center">
            <div class="flex items-center">
                <img src="https://p11-doubao-search-sign.byteimg.com/labis/ebade642ff86c2e63ecee9a09f8215ca~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765005047&x-signature=tOz2HfuRj%2BJWe3QQvW5hW1lMMOI%3D" alt="原神" class="h-10 w-10 mr-3">
                <span class="text-xl font-bold text-white">原神</span>
            </div>
            <div class="hidden md:flex space-x-1">
                <a href="#characters" class="nav-link active">角色</a>
                <a href="#elements" class="nav-link">元素反应</a>
                <a href="#world" class="nav-link">世界观</a>
            </div>
            <div class="md:hidden">
                <button id="mobile-menu-button" class="text-gray-300 hover:text-white">
                    <i class="fas fa-bars text-xl"></i>
                </button>
            </div>
        </div>
        <!-- 移动端菜单 -->
        <div id="mobile-menu" class="md:hidden hidden mt-3 pb-3">
            <a href="#characters" class="block py-2 text-gray-300 hover:text-white">角色</a>
            <a href="#elements" class="block py-2 text-gray-300 hover:text-white">元素反应</a>
            <a href="#world" class="block py-2 text-gray-300 hover:text-white">世界观</a>
        </div>
    </div>
</nav>

<!-- 头部横幅 -->
<header class="pt-24 pb-16 md:pt-32 md:pb-24 px-4 bg-cover bg-center" style="background-image: url('https://p26-doubao-search-sign.byteimg.com/tos-cn-i-qvj2lq49k0/ad448d9cc5084cd99d1d16f5eeb12acc~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765005047&x-signature=DmmsOQrkBEqDRfQc5pYOAYOfBDM%3D');">
    <div class="container mx-auto">
        <div class="max-w-3xl mx-auto text-center">
            <h1 class="text-4xl md:text-6xl font-bold mb-6 text-white drop-shadow-lg">提瓦特大陆</h1>
            <p class="text-xl md:text-2xl text-gray-200 mb-8 drop-shadow-md">与你一同探索这个充满元素力量的奇幻世界</p>
            <div class="flex flex-wrap justify-center gap-4">
                <a href="#characters" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full transition duration-300 ease-in-out transform hover:scale-105">
                    探索角色
                </a>
                <a href="#elements" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-full transition duration-300 ease-in-out transform hover:scale-105">
                    元素反应
                </a>
            </div>
        </div>
    </div>
</header>

<!-- 角色展示区 -->
<section id="characters" class="py-16 px-4">
    <div class="container mx-auto">
        <h2 class="text-3xl md:text-4xl font-bold mb-2 text-center">原神角色</h2>
        <p class="text-gray-400 text-center mb-12">探索提瓦特大陆上的伙伴与敌人</p>
        
        <!-- 筛选器 -->
        <div class="filter-container justify-center">
            <button class="filter-btn active" data-filter="all">全部</button>
            <button class="filter-btn" data-filter="anemo">风</button>
            <button class="filter-btn" data-filter="geo">岩</button>
            <button class="filter-btn" data-filter="electro">雷</button>
            <button class="filter-btn" data-filter="dendro">草</button>
            <button class="filter-btn" data-filter="hydro">水</button>
            <button class="filter-btn" data-filter="pyro">火</button>
            <button class="filter-btn" data-filter="cryo">冰</button>
        </div>
        
        <!-- 角色网格 -->
        <div class="character-grid">
            <!-- 角色卡片 1 -->
            <div class="character-card" data-element="anemo">
                <div class="relative overflow-hidden h-64">
                    <img src="https://p11-doubao-search-sign.byteimg.com/labis/a9570487a73c5cc53c60b313df3adcf1~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765005047&x-signature=FIzwkv%2Fbab8o1Ivs9vajhK5QeKw%3D" alt="枫原万叶" class="w-full h-full object-cover">
                    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
                        <h3 class="text-xl font-bold">枫原万叶</h3>
                        <div class="flex items-center mt-1">
                            <div class="element-icon element-anemo">
                                <i class="fas fa-wind text-white"></i>
                            </div>
                            <span>单手剑</span>
                        </div>
                    </div>
                </div>
                <div class="p-4">
                    <p class="text-gray-400 text-sm">来自稻妻的浪人武士，如今栖身于璃月船队「南十字」中。性情温和而洒脱，心中埋藏着许多往事。</p>
                </div>
            </div>
            
            <!-- 角色卡片 2 -->
            <div class="character-card" data-element="cryo">
                <div class="relative overflow-hidden h-64">
                    <img src="https://p11-doubao-search-sign.byteimg.com/labis/5d5e4afab44eb7f4268c133ffcd71bf3~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765005047&x-signature=b04va1msYooaRxntb1SuQ8oSf8M%3D" alt="神里绫华" class="w-full h-full object-cover">
                    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
                        <h3 class="text-xl font-bold">神里绫华</h3>
                        <div class="flex items-center mt-1">
                            <div class="element-icon element-cryo">
                                <i class="fas fa-snowflake text-white"></i>
                            </div>
                            <span>单手剑</span>
                        </div>
                    </div>
                </div>
                <div class="p-4">
                    <p class="text-gray-400 text-sm">稻妻「社奉行」神里家的大小姐。端庄优雅，聪慧坚韧，深受稻妻民众爱戴。</p>
                </div>
            </div>
            
            <!-- 角色卡片 3 -->
            <div class="character-card" data-element="pyro">
                <div class="relative overflow-hidden h-64">
                    <img src="https://p11-doubao-search-sign.byteimg.com/labis/image/2f35b808dc1ad987c5b9018642cc4dd3~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765005047&x-signature=G%2Fobez784BdDa2eAc1outEjhciI%3D" alt="迪卢克" class="w-full h-full object-cover">
                    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
                        <h3 class="text-xl font-bold">迪卢克</h3>
                        <div class="flex items-center mt-1">
                            <div class="element-icon element-pyro">
                                <i class="fas fa-fire text-white"></i>
                            </div>
                            <span>双手剑</span>
                        </div>
                    </div>
                </div>
                <div class="p-4">
                    <p class="text-gray-400 text-sm">蒙德「晨曦酒庄」的庄主，蒙德首富。同时也是一名暗中守护蒙德的「暗夜英雄」。</p>
                </div>
            </div>
            
            <!-- 角色卡片 4 -->
            <div class="character-card" data-element="hydro">
                <div class="relative overflow-hidden h-64">
                    <img src="https://p26-doubao-search-sign.byteimg.com/tos-cn-i-qvj2lq49k0/ad448d9cc5084cd99d1d16f5eeb12acc~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765005047&x-signature=DmmsOQrkBEqDRfQc5pYOAYOfBDM%3D" alt="胡桃" class="w-full h-full object-cover">
                    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
                        <h3 class="text-xl font-bold">胡桃</h3>
                        <div class="flex items-center mt-1">
                            <div class="element-icon element-pyro">
                                <i class="fas fa-fire text-white"></i>
                            </div>
                            <span>长柄武器</span>
                        </div>
                    </div>
                </div>
                <div class="p-4">
                    <p class="text-gray-400 text-sm">璃月「往生堂」第七十七代堂主，性格活泼开朗，对生死有着独特的见解。</p>
                </div>
            </div>
            
            <!-- 角色卡片 5 -->
            <div class="character-card" data-element="electro">
                <div class="relative overflow-hidden h-64">
                    <img src="https://p11-doubao-search-sign.byteimg.com/labis/93973a3d1870030689eda641abf2cfac~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765005047&x-signature=n3DvbsclSzcIbf2v7JPm6nfAtV0%3D" alt="雷电将军" class="w-full h-full object-cover">
                    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
                        <h3 class="text-xl font-bold">雷电将军</h3>
                        <div class="flex items-center mt-1">
                            <div class="element-icon element-electro">
                                <i class="fas fa-bolt text-white"></i>
                            </div>
                            <span>长柄武器</span>
                        </div>
                    </div>
                </div>
                <div class="p-4">
                    <p class="text-gray-400 text-sm">稻妻的统治者，追求「永恒」的神明。为了守护稻妻，选择将自己封闭在「一心净土」中。</p>
                </div>
            </div>
            
            <!-- 角色卡片 6 -->
            <div class="character-card" data-element="geo">
                <div class="relative overflow-hidden h-64">
                    <img src="https://p11-doubao-search-sign.byteimg.com/labis/93973a3d1870030689eda641abf2cfac~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765005047&x-signature=n3DvbsclSzcIbf2v7JPm6nfAtV0%3D" alt="钟离" class="w-full h-full object-cover">
                    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
                        <h3 class="text-xl font-bold">钟离</h3>
                        <div class="flex items-center mt-1">
                            <div class="element-icon element-geo">
                                <i class="fas fa-gem text-white"></i>
                            </div>
                            <span>长柄武器</span>
                        </div>
                    </div>
                </div>
                <div class="p-4">
                    <p class="text-gray-400 text-sm">璃月的「岩神」，契约之神。已放弃神位，以凡人身份在璃月港生活。</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 元素反应区 -->
userId_undefined
去预览
0/2000

全部评论 1

热门讨论