元神（1）
2025-10-09 06:29:25
发布于：安徽
1阅读
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>原神代码展示 | Genshin Impact Code</title>
<!-- Tailwind CSS v3 -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
<!-- 统一的 Tailwind 配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1a365d',
secondary: '#2a6f97',
accent: '#fbbf24',
fire: '#ff4d4f',
water: '#3b82f6',
wind: '#10b981',
thunder: '#8b5cf6',
grass: '#84cc16',
ice: '#60a5fa',
rock: '#f59e0b',
dark: '#1e293b',
light: '#f8fafc'
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
animation: {
'float': 'float 3s ease-in-out infinite',
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' },
}
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.text-shadow-lg {
text-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.bg-blur {
backdrop-filter: blur(8px);
}
.element-fire { @apply bg-fire text-white; }
.element-water { @apply bg-water text-white; }
.element-wind { @apply bg-wind text-white; }
.element-thunder { @apply bg-thunder text-white; }
.element-grass { @apply bg-grass text-white; }
.element-ice { @apply bg-ice text-white; }
.element-rock { @apply bg-rock text-white; }
}
</style>
</head>
<body class="bg-dark text-light min-h-screen flex flex-col">
<!-- 背景图 -->
<div class="fixed inset-0 z-0">
<img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/10a6e6b8a8aa47aebd15a7c3b892adfd~tplv-a9rns2rl98-image.image?rcl=20251009060139BF5FFC995B2D90359A17&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1762552929&x-signature=s9kYYZ5ua9aGoMF1pYtuIRBGNRo%3D"
alt="原神背景"
class="w-full h-full object-cover opacity-30">
</div>
<!-- 顶部导航栏 -->
<header class="relative z-10 bg-primary/80 bg-blur border-b border-secondary/50">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<div class="w-10 h-10 rounded-full bg-accent flex items-center justify-center">
<i class="fa fa-star text-primary text-xl"></i>
</div>
<h1 class="text-2xl font-bold text-accent">原神代码</h1>
</div>
<div class="hidden md:flex items-center space-x-6">
<a href="#characters" class="hover:text-accent transition-colors">角色展示</a>
<a href="#elements" class="hover:text-accent transition-colors">元素反应</a>
<a href="#weapons" class="hover:text-accent transition-colors">武器装备</a>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" placeholder="搜索角色、武器..."
class="bg-dark/50 border border-secondary/50 rounded-full py-1 px-4 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-accent">
<i class="fa fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
</div>
<button class="md:hidden text-2xl">
<i class="fa fa-bars"></i>
</button>
</div>
</div>
</header>
<!-- 移动端菜单 -->
<div id="mobile-menu" class="fixed inset-0 z-20 bg-dark/95 bg-blur hidden flex-col items-center justify-center space-y-8 text-xl">
<button id="close-menu" class="absolute top-6 right-6 text-2xl">
<i class="fa fa-times"></i>
</button>
<a href="#characters" class="hover:text-accent transition-colors">角色展示</a>
<a href="#elements" class="hover:text-accent transition-colors">元素反应</a>
<a href="#weapons" class="hover:text-accent transition-colors">武器装备</a>
</div>
<!-- 主内容区 -->
<main class="relative z-10 flex-grow">
<!-- 英雄区 -->
<section class="relative h-[500px] flex items-center justify-center overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-b from-primary/30 to-dark/80 z-10"></div>
<div class="container mx-auto px-4 z-20 text-center">
<h1 class="text-5xl md:text-6xl font-bold mb-4 text-shadow-lg">原神代码展示</h1>
<p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto text-shadow">探索提瓦特大陆的角色、元素反应和武器装备</p>
<div class="flex flex-wrap justify-center gap-4">
<a href="#characters" class="bg-accent hover:bg-accent/80 text-primary font-bold py-2 px-6 rounded-full transition-all transform hover:scale-105">
角色展示
</a>
<a href="#elements" class="bg-transparent border-2 border-accent hover:bg-accent/20 text-accent font-bold py-2 px-6 rounded-full transition-all transform hover:scale-105">
元素反应
</a>
</div>
</div>
</section>
<!-- 角色展示区 -->
<section id="characters" class="py-16">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-2 text-center">角色展示</h2>
<p class="text-center text-gray-400 mb-10">探索提瓦特大陆的伙伴们</p>
<!-- 角色筛选器 -->
<div class="flex flex-wrap justify-center gap-3 mb-8">
<button class="element-filter active px-4 py-1 rounded-full bg-white/10 hover:bg-white/20 transition-colors" data-element="all">
全部
</button>
<button class="element-filter px-4 py-1 rounded-full bg-fire/30 hover:bg-fire/50 transition-colors" data-element="fire">
<i class="fa fa-fire mr-1"></i> 火
</button>
<button class="element-filter px-4 py-1 rounded-full bg-water/30 hover:bg-water/50 transition-colors" data-element="water">
<i class="fa fa-tint mr-1"></i> 水
</button>
<button class="element-filter px-4 py-1 rounded-full bg-wind/30 hover:bg-wind/50 transition-colors" data-element="wind">
<i class="fa fa-leaf mr-1"></i> 风
</button>
<button class="element-filter px-4 py-1 rounded-full bg-thunder/30 hover:bg-thunder/50 transition-colors" data-element="thunder">
<i class="fa fa-bolt mr-1"></i> 雷
</button>
<button class="element-filter px-4 py-1 rounded-full bg-grass/30 hover:bg-grass/50 transition-colors" data-element="grass">
<i class="fa fa-pagelines mr-1"></i> 草
</button>
<button class="element-filter px-4 py-1 rounded-full bg-ice/30 hover:bg-ice/50 transition-colors" data-element="ice">
<i class="fa fa-snowflake-o mr-1"></i> 冰
</button>
<button class="element-filter px-4 py-1 rounded-full bg-rock/30 hover:bg-rock/50 transition-colors" data-element="rock">
<i class="fa fa-cubes mr-1"></i> 岩
</button>
</div>
<!-- 角色卡片网格 -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- 角色卡片 1 -->
<div class="character-card bg-dark/50 border border-secondary/30 rounded-xl overflow-hidden hover:border-accent/50 transition-all transform hover:scale-105 group" data-element="fire">
<div class="relative h-64 overflow-hidden">
<img src="https://p3-doubao-search-sign.byteimg.com/labis/80cd788fe1e7c28ba1635a1cd915d51f~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765144910&x-signature=sEBgVPSXo%2BQRq%2FiUb%2BGeo9yi9Xo%3D"
alt="胡桃"
class="w-full h-full object-cover transition-transform group-hover:scale-110">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-dark to-transparent p-4">
<h3 class="text-xl font-bold">胡桃</h3>
<div class="flex items-center mt-1">
<span class="element-fire px-2 py-0.5 rounded text-xs">火</span>
<span class="ml-2 text-sm text-gray-300">长柄武器</span>
</div>
</div>
</div>
<div class="p-4">
<p class="text-sm text-gray-400 mb-3">往生堂第七十七代堂主，掌控着璃月的生死之事。</p>
<button class="view-character w-full py-1.5 rounded bg-secondary/30 hover:bg-secondary/50 transition-colors text-sm" data-character="hutao">
查看详情
</button>
</div>
</div>
<!-- 角色卡片 2 -->
<div class="character-card bg-dark/50 border border-secondary/30 rounded-xl overflow-hidden hover:border-accent/50 transition-all transform hover:scale-105 group" data-element="wind">
<div class="relative h-64 overflow-hidden">
<img src="https://p3-doubao-search-sign.byteimg.com/labis/a9570487a73c5cc53c60b313df3adcf1~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765144910&x-signature=nbTKMdb8z6KMxG0kGZSjqOr2pXg%3D"
alt="枫原万叶"
class="w-full h-full object-cover transition-transform group-hover:scale-110">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-dark to-transparent p-4">
<h3 class="text-xl font-bold">枫原万叶</h3>
<div class="flex items-center mt-1">
<span class="element-wind px-2 py-0.5 rounded text-xs">风</span>
<span class="ml-2 text-sm text-gray-300">单手剑</span>
</div>
</div>
</div>
<div class="p-4">
<p class="text-sm text-gray-400 mb-3">浪迹天涯的红叶，随风而行的诗人，拥有操控风元素的能力。</p>
<button class="view-character w-full py-1.5 rounded bg-secondary/30 hover:bg-secondary/50 transition-colors text-sm" data-character="kazuha">
查看详情
</button>
</div>
</div>
<!-- 角色卡片 3 -->
<div class="character-card bg-dark/50 border border-secondary/30 rounded-xl overflow-hidden hover:border-accent/50 transition-all transform hover:scale-105 group" data-element="ice">
<div class="relative h-64 overflow-hidden">
<img src="https://p3-doubao-search-sign.byteimg.com/labis/5d5e4afab44eb7f4268c133ffcd71bf3~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765144910&x-signature=VL4zfaAKusOOS9qtliLfdlFBq3k%3D"
alt="神里绫华"
class="w-full h-full object-cover transition-transform group-hover:scale-110">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-dark to-transparent p-4">
<h3 class="text-xl font-bold">神里绫华</h3>
<div class="flex items-center mt-1">
<span class="element-ice px-2 py-0.5 rounded text-xs">冰</span>
<span class="ml-2 text-sm text-gray-300">单手剑</span>
</div>
</div>
</div>
<div class="p-4">
<p class="text-sm text-gray-400 mb-3">稻妻神里家的大小姐，端庄优雅，剑术高超。</p>
<button class="view-character w-full py-1.5 rounded bg-secondary/30 hover:bg-secondary/50 transition-colors text-sm" data-character="ayaka">
查看详情
</button>
</div>
</div>
<!-- 角色卡片 4 -->
<div class="character-card bg-dark/50 border border-secondary/30 rounded-xl overflow-hidden hover:border-accent/50 transition-all transform hover:scale-105 group" data-element="fire">
<div class="relative h-64 overflow-hidden">
<img src="https://p3-doubao-search-sign.byteimg.com/labis/b27fab05d1bfe4ed93d65f93848f2b72~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765144910&x-signature=QildGNSq73X71KKIKytBCQ1GbzQ%3D"
alt="迪卢克"
class="w-full h-full object-cover transition-transform group-hover:scale-110">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-dark to-transparent p-4">
<h3 class="text-xl font-bold">迪卢克</h3>
<div class="flex items-center mt-1">
<span class="element-fire px-2 py-0.5 rounded text-xs">火</span>
<span class="ml-2 text-sm text-gray-300">双手剑</span>
</div>
</div>
</div>
<div class="p-4">
<p class="text-sm text-gray-400 mb-3">蒙德最富有的酒庄老板，同时也是一位强大的火元素战士。</p>
<button class="view-character w-full py-1.5 rounded bg-secondary/30 hover:bg-secondary/50 transition-colors text-sm" data-character="diluc">
查看详情
</button>
</div>
</div>
<!-- 角色卡片 5 -->
<div class="character-card bg-dark/50 border border-secondary/30 rounded-xl overflow-hidden hover:border-accent/50 transition-all transform hover:scale-105 group" data-element="thunder">
<div class="relative h-64 overflow-hidden">
<img src="https://p3-doubao-search-sign.byteimg.com/tos-cn-i-qvj2lq49k0/aea2e502321c4349a47232adc4250545~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765145171&x-signature=BnKcAtyFJuYHE%2BAkkrs4LE7HLvQ%3D"
alt="雷电将军"
class="w-full h-full object-cover transition-transform group-hover:scale-110">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-dark to-transparent p-4">
<h3 class="text-xl font-bold">雷电将军</h3>
<div class="flex items-center mt-1">
<span class="element-thunder px-2 py-0.5 rounded text-xs">雷</span>
<span class="ml-2 text-sm text-gray-300">长柄武器</span>
</div>
</div>
</div>
<div class="p-4">
<p class="text-sm text-gray-400 mb-3">稻妻的雷神，追求永恒的理念，拥有强大的雷元素掌控能力。</p>
<button class="view-character w-full py-1.5 rounded bg-secondary/30 hover:bg-secondary/50 transition-colors text-sm" data-character="raiden">
查看详情
</button>
</div>
</div>
<!-- 角色卡片 6 -->
<div class="character-card bg-dark/50 border border-secondary/30 rounded-xl overflow-hidden hover:border-accent/50 transition-all transform hover:scale-105 group" data-element="ice">
<div class="relative h-64 overflow-hidden">
<img src="https://p26-doubao-search-sign.byteimg.com/labis/2d0007336457cae08b16cb840637d6f5~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765145171&x-signature=K8ZJMa21Vs90HKCXmAiIzrO0NBM%3D"
alt="甘雨"
class="w-full h-full object-cover transition-transform group-hover:scale-110">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-dark to-transparent p-4">
<h3 class="text-xl font-bold">甘雨</h3>
<div class="flex items-center mt-1">
<span class="element-ice px-2 py-0.5 rounded text-xs">冰</span>
<span class="ml-2 text-sm text-gray-300">弓</span>
</div>
</div>
</div>
<div class="p-4">
<p class="text-sm text-gray-400 mb-3">璃月的秘书，半仙之体，拥有强大的冰元素掌控能力。</p>
<button class="view-character w-full py-1.5 rounded bg-secondary/30 hover:bg-secondary/50 transition-colors text-sm" data-character="ganyu">
查看详情
</button>
</div>
</div>
<!-- 角色卡片 7 -->
<div class="character-card bg-dark/50 border border-secondary/30 rounded-xl overflow-hidden hover:border-accent/50 transition-all transform hover:scale-105 group" data-element="rock">
<div class="relative h-64 overflow-hidden">
<img src="https://p3-doubao-search-sign.byteimg.com/tos-cn-i-qvj2lq49k0/a7aa987a640c432e9aa1b427fab49a09~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765145171&x-signature=JCTfkCiYKpXw2Tj576TEu8VewSA%3D"
alt="钟离"
class="w-full h-full object-cover transition-transform group-hover:scale-110">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-dark to-transparent p-4">
<h3 class="text-xl font-bold">钟离</h3>
<div class="flex items-center mt-1">
<span class="element-rock px-2 py-0.5 rounded text-xs">岩</span>
<span class="ml-2 text-sm text-gray-300">长柄武器</span>
</div>
</div>
</div>
<div class="p-4">
<p class="text-sm text-gray-400 mb-3">璃月的岩神，契约之神，拥有强大的岩元素掌控能力。</p>
<button class="view-character w-full py-1.5 rounded bg-secondary/30 hover:bg-secondary/50 transition-colors text-sm" data-character="zhongli">
查看详情
</button>
</div>
</div>
<!-- 角色卡片 8 -->
<div class="character-card bg-dark/50 border border-secondary/30 rounded-xl overflow-hidden hover:border-accent/50 transition-all transform hover:scale-105 group" data-element="wind">
<div class="relative h-64 overflow-hidden">
<img src="https://p26-doubao-search-sign.byteimg.com/labis/0a84ec61e47ae942f91e4e00ba971a07~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765145171&x-signature=fwQUOCqShfjF7ddqXPxk2DczbO0%3D"
alt="温迪"
class="w-full h-full object-cover transition-transform group-hover:scale-110">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-dark to-transparent p-4">
<h3 class="text-xl font-bold">温迪</h3>
<div class="flex items-center mt-1">
<span class="element-wind px-2 py-0.5 rounded text-xs">风</span>
<span class="ml-2 text-sm text-gray-300">弓</span>
</div>
</div>
</div>
<div class="p-4">
<p class="text-sm text-gray-400 mb-3">蒙德的风神，吟游诗人，拥有强大的风元素掌控能力。</p>
<button class="view-character w-full py-1.5 rounded bg-secondary/30 hover:bg-secondary/50 transition-colors text-sm" data-character="venti">
查看详情
</button>
</div>
</div>
<!-- 角色卡片 9 -->
<div class="character-card bg-dark/50 border border-secondary/30 rounded-xl overflow-hidden hover:border-accent/50 transition-all transform hover:scale-105 group" data-element="water">
<div class="relative h-64 overflow-hidden">
<img src="https://p26-doubao-search-sign.byteimg.com/tos-cn-i-qvj2lq49k0/3d0d023241f74e1283efdcde4b557fa3~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765145983&x-signature=DaoIGhpAaLpvHi6jmbG2ZwFbCWc%3D"
alt="珊瑚宫心海"
class="w-full h-full object-cover transition-transform group-hover:scale-110">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-dark to-transparent p-4">
<h3 class="text-xl font-bold">珊瑚宫心海</h3>
<div class="flex items-center mt-1">
<span class="element-water px-2 py-0.5 rounded text-xs">水</span>
<span class="ml-2 text-sm text-gray-300">法器</span>
</div>
</div>
</div>
<div class="p-4">
<p class="text-sm text-gray-400 mb-3">海祇岛的「现人神巫女」，拥有强大的水元素掌控能力和治疗能力。</p>
<button class="view-character w-full py-1.5 rounded bg-secondary/30 hover:bg-secondary/50 transition-colors text-sm" data-character="kokomi">
查看详情
</button>
</div>
</div>
<!-- 角色卡片 10 -->
<div class="character-card bg-dark/50 border border-secondary/30 rounded-xl overflow-hidden hover:border-accent/50 transition-all transform hover:scale-105 group" data-element="grass">
<div class="relative h-64 overflow-hidden">
<img src="https://p26-doubao-search-sign.byteimg.com/tos-cn-i-qvj2lq49k0/6e85a508961f4f54afd7f6576dda77bb~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765145983&x-signature=limMWr1D3%2FejArWwmdHtyx0b6A4%3D"
alt="纳西妲"
class="w-full h-full object-cover transition-transform group-hover:scale-110">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-dark to-transparent p-4">
<h3 class="text-xl font-bold">纳西妲</h3>
<div class="flex items-center mt-1">
<span class="element-grass px-2 py-0.5 rounded text-xs">草</span>
<span class="ml-2 text-sm text-gray-300">法器</span>
</div>
</div>
</div>
<div class="p-4">
<p class="text-sm text-gray-400 mb-3">须弥的「小吉祥草神」，拥有强大的草元素掌控能力和智慧。</p>
<button class="view-character w-full py-1.5 rounded bg-secondary/30 hover:bg-secondary/50 transition-colors text-sm" data-character="nahida">
查看详情
</button>
</div>
</div>
<!-- 角色卡片 11 -->
<div class="character-card bg-dark/50 border border-secondary/30 rounded-xl overflow-hidden hover:border-accent/50 transition-all transform hover:scale-105 group" data-element="grass">
<div class="relative h-64 overflow-hidden">
<img src="https://p3-doubao-search-sign.byteimg.com/labis/66de9f4fb1ee4c7c9b3003b6b614190d~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765145983&x-signature=H765evWkHDtQ6EAgyPWdiHUMFmw%3D"
alt="艾尔海森"
class="w-full h-full object-cover transition-transform group-hover:scale-110">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-dark to-transparent p-4">
<h3 class="text-xl font-bold">艾尔海森</h3>
<div class="flex items-center mt-1">
<span class="element-grass px-2 py-0.5 rounded text-xs">草</span>
<span class="ml-2 text-sm text-gray-300">单手剑</span>
</div>
</div>
</div>
<div class="p-4">
<p class="text-sm text-gray-400 mb-3">须弥教令院的学者，拥有强大的草元素掌控能力和智慧。</p>
<button class="view-character w-full py-1.5 rounded bg-secondary/30 hover:bg-secondary/50 transition-colors text-sm" data-character="alhaitham">
查看详情
</button>
</div>
</div>
<!-- 角色卡片 12 -->
<div class="character-card bg-dark/50 border border-secondary/30 rounded-xl overflow-hidden hover:border-accent/50 transition-all transform hover:scale-105 group" data-element="water">
<div class="relative h-64 overflow-hidden">
<img src="https://p3-doubao-search-sign.byteimg.com/labis/ff6dc7c88f542893a08ddec3d327b154~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765145983&x-signature=sI%2FuLNAy4cOsjdU979VKyTLnC4A%3D"
alt="芙宁娜"
class="w-full h-full object-cover transition-transform group-hover:scale-110">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-dark to-transparent p-4">
<h3 class="text-xl font-bold">芙宁娜</h3>
<div class="flex items-center mt-1">
<span class="element-water px-2 py-0.5 rounded text-xs">水</span>
<span class="ml-2 text-sm text-gray-300">单手剑</span>
</div>
</div>
</div>
<div class="p-4">
<p class="text-sm text-gray-400 mb-3">枫丹的水神，拥有强大的水元素掌控能力和表演天赋。</p>
<button class="view-character w-full py-1.5 rounded bg-secondary/30 hover:bg-secondary/50 transition-colors text-sm" data-character="furina">
查看详情
</button>
</div>
</div>
<!-- 角色卡片 13 -->
<div class="character-card bg-dark/50 border border-secondary/30 rounded-xl overflow-hidden hover:border-accent/50 transition-all transform hover:scale-105 group" data-element="ice">
<div class="relative h-64 overflow-hidden">
<img src="https://p11-doubao-search-sign.byteimg.com/labis/e4f9bfd0cdcb7bf0aed592b694c82af7~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765145983&x-signature=Hi7FfzwmKNFdfKoydjM%2FRoA8s3E%3D"
alt="莱欧斯利"
class="w-full h-full object-cover transition-transform group-hover:scale-110">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-dark to-transparent p-4">
<h3 class="text-xl font-bold">莱欧斯利</h3>
<div class="flex items-center mt-1">
<span class="element-ice px-2 py-0.5 rounded text-xs">冰</span>
<span class="ml-2 text-sm text-gray-300">法器</span>
</div>
</div>
</div>
<div class="p-4">
<p class="text-sm text-gray-400 mb-3">枫丹的「谕示裁定枢机」，拥有强大的冰元素掌控能力和审判能力。</p>
<button class="view-character w-full py-1.5 rounded bg-secondary/30 hover:bg-secondary/50 transition-colors text-sm" data-character="wriothesley">
查看详情
</button>
</div>
</div>
</div>
<!-- 加载更多按钮 -->
<div class="text-center mt-10">
<button id="load-more-characters" class="py-2 px-6 rounded-full bg-secondary/30 hover:bg-secondary/50 transition-colors">
加载更多角色
</button>
</div>
</div>
</section>
<!-- 元素反应区 -->
<section id="elements" class="py-16 bg-primary/20">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-2 text-center">元素反应</h2>
<p class="text-center text-gray-400 mb-10">探索七种元素间的奇妙反应</p>
<!-- 元素反应图表 -->
<div class="flex flex-col lg:flex-row gap-8">
<div class="lg:w-1/2">
<div class="bg-dark/50 border border-secondary/30 rounded-xl p-6 h-full">
<h3 class="text-xl font-bold mb-4">元素反应关系图</h3>
<div class="relative h-[400px]">
<img src="https://p26-doubao-search-sign.byteimg.com/labis/2956dd5e2a48965dda01c84a8359de06~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765144910&x-signature=VpJgNDJGHM6NH1vHJKxxHD6jb6U%3D"
alt="元素反应关系图"
class="w-full h-full object-contain">
</div>
</div>
</div>
<!-- 元素反应模拟器 -->
<div class="lg:w-1/2">
<div class="bg-dark/50 border border-secondary/30 rounded-xl p-6 h-full">
<h3 class="text-xl font-bold mb-4">元素反应模拟器</h3>
<div class="mb-6">
<label class="block text-sm font-medium mb-2">选择第一个元素</label>
<div class="grid grid-cols-4 gap-3">
<button class="element-btn p-3 rounded-lg bg-fire/30 hover:bg-fire/50 transition-colors" data-element="fire">
<i class="fa fa-fire text-2xl"></i>
<p class="mt-1 text-sm">火</p>
</button>
<button class="element-btn p-3 rounded-lg bg-water/30 hover:bg-water/50 transition-colors" data-element="water">
<i class="fa fa-tint text-2xl"></i>
<p class="mt-1 text-sm">水</p>
</button>
<button class="element-btn p-3 rounded-lg bg-wind/30 hover:bg-wind/50 transition-colors" data-element="wind">
<i class="fa fa-leaf text-2xl"></i>
<p class="mt-1 text-sm">风</p>
</button>
<button class="element-btn p-3 rounded-lg bg-thunder/30 hover:bg-thunder/50 transition-colors" data-element="thunder">
<i class="fa fa-bolt text-2xl"></i>
<p class="mt-1 text-sm">雷</p>
</button>
<button class="element-btn p-3 rounded-lg bg-grass/30 hover:bg-grass/50 transition-colors" data-element="grass">
<i class="fa fa-pagelines text-2xl"></i>
<p class="mt-1 text-sm">草</p>
</button>
<button class="element-btn p-3 rounded-lg bg-ice/30 hover:bg-ice/50 transition-colors" data-element="ice">
<i class="fa fa-snowflake-o text-2xl"></i>
<p class="mt-1 text-sm">冰</p>
</button>
<button class="element-btn p-3 rounded-lg bg-rock/30 hover:bg-rock/50 transition-colors" data-element="rock">
<i class="fa fa-cubes text-2xl"></i>
<p class="mt-1 text-sm">岩</p>
</button>
</div>
</div>
<div class="flex justify-center my-4">
<div id="plus-sign" class="text-3xl font-bold text-gray-500 opacity-0 transition-opacity">+</div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium mb-2">选择第二个元素</label>
<div class="grid grid-cols-4 gap-3">
<button class="element-btn p-3 rounded-lg bg-fire/30 hover:bg-fire/50 transition-colors" data-element="fire">
<i class="fa fa-fire text-2xl"></i>
<p class="mt-1 text-sm">火</p>
</button>
<button class="element-btn p-3 rounded-lg bg-water/30 hover:bg-water/50 transition-colors" data-element="water">
<i class="fa fa-tint text-2xl"></i>
<p class="mt-1 text-sm">水</p>
</button>
<button class="element-btn p-3 rounded-lg bg-wind/30 hover:bg-wind/50 transition-colors" data-element="wind">
<i class="fa fa-leaf text-2xl"></i>
<p class="mt-1 text-sm">风</p>
</button>
<button class="element-btn p-3 rounded-lg bg-thunder/30 hover:bg-thunder/50 transition-colors" data-element="thunder">
<i class="fa fa-bolt text-2xl"></i>
<p class="mt-1 text-sm">雷</p>
</button>
<button class="element-btn p-3 rounded-lg bg-grass/30 hover:bg-grass/50 transition-colors" data-element="grass">
<i class="fa fa-pagelines text-2xl"></i>
<p class="mt-1 text-sm">草</p>
</button>
<button class="element-btn p-3 rounded-lg bg-ice/30 hover:bg-ice/50 transition-colors" data-element="ice">
<i class="fa fa-snowflake-o text-2xl"></i>
<p class="mt-1 text-sm">冰</p>
</button>
<button class="element-btn p-3 rounded-lg bg-rock/30 hover:bg-rock/50 transition-colors" data-element="rock">
<i class="fa fa-cubes text-2xl"></i>
<p class="mt-1 text-sm">岩</p>
</button>
</div>
</div>
<!-- 反应结果 -->
<div id="reaction-result" class="mt-6 p-4 rounded-lg bg-dark/30 border border-secondary/30 hidden">
<h4 class="text-lg font-bold mb-2">反应结果: <span id="reaction-name"></span></h4>
<p id="reaction-description" class="text-sm text-gray-300"></p>
<div id="reaction-animation" class="mt-4 h-20 flex items-center justify-center">
<!-- 反应动画将在这里显示 -->
</div>
</div>
</div>
</div>
</div>
<!-- 元素反应详情 -->
<div class="mt-10 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-dark/50 border border-secondary/30 rounded-xl p-6 hover:border-accent/50 transition-all">
<h3 class="text-xl font-bold mb-3 flex items-center">
<span class="element-fire w-8 h-8 rounded-full flex items-center justify-center mr-2">
<i class="fa fa-fire"></i>
</span>
增幅反应
</h3>
<ul class="space-y-3 text-sm">
<li class="flex items-start">
<span class="font-medium mr-2">蒸发:</span>
<span>火元素攻击水元素附着（火→水）时，伤害倍率为 2.0倍；水元素攻击火元素附着（水→火）时，伤害倍率为 1.5倍。</span>
</li>
<li class="flex items-start">
<span class="font-medium mr-2">融化:</span>
<span>火元素攻击冰元素附着（火→冰）时，伤害倍率为 2.0倍；冰元素攻击火元素附着（冰→火）时，伤害倍率为 1.5倍。</span>
</li>
</ul>
</div>
<div class="bg-dark/50 border border-secondary/30 rounded-xl p-6 hover:border-accent/50 transition-all">
<h3 class="text-xl font-bold mb-3 flex items-center">
<span class="element-thunder w-8 h-8 rounded-full flex items-center justify-center mr-2">
<i class="fa fa-bolt"></i>
</span>
剧变反应
</h3>
<ul class="space-y-3 text-sm">
<li class="flex items-start">
<span class="font-medium mr-2">超载:</span>
<span>造成范围火元素爆炸伤害，并能击飞小型敌人，是对付愚人众等敌人护盾的利器。</span>
</li>
<li class="flex items-start">
<span class="font-medium mr-2">感电:</span>
<span>造成持续的雷元素伤害，若周围有多个被水元素附着的敌人，会连锁放电，对群效果卓越。</span>
</li>
<li class="flex items-start">
<span class="font-medium mr-2">超导:</span>
<span>造成范围冰元素伤害，并显著降低受影响的敌人的物理抗性（40%），持续12秒。</span>
</li>
</ul>
</div>
<div class="bg-dark/50 border border-secondary/30 rounded-xl p-6 hover:border-accent/50 transition-all">
<h3 class="text-xl font-bold mb-3 flex items-center">
<span class="element-grass w-8 h-8 rounded-full flex items-center justify-center mr-2">
<i class="fa fa-pagelines"></i>
</span>
草元素反应
</h3>
<ul class="space-y-3 text-sm">
<li class="flex items-start">
<span class="font-medium mr-2">绽放:</span>
<span>草+水生成"草原核"，草原核一段时间后自动爆炸造成草元素范围伤害。</span>
</li>
<li class="flex items-start">
<span class="font-medium mr-2">烈绽放:</span>
<span>草原核接触火元素后立即剧烈爆炸，造成火元素范围伤害。</span>
</li>
<li class="flex items-start">
<span class="font-medium mr-2">超绽放:</span>
<span>草原核接触雷元素后变为追踪弹，自动索敌造成草元素伤害。</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- 武器装备区 -->
<section id="weapons" class="py-16">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-2 text-center">武器装备</h2>
<p class="text-center text-gray-400 mb-10">探索提瓦特大陆的神兵利器</p>
<!-- 武器筛选器 -->
<div class="flex flex-wrap justify-center gap-3 mb-8">
<button class="weapon-filter active px-4 py-1 rounded-full bg-white/10 hover:bg-white/20 transition-colors" data-type="all">
全部
</button>
<button class="weapon-filter px-4 py-1 rounded-full bg-white/10 hover:bg-white/20 transition-colors" data-type="sword">
单手剑
</button>
<button class="weapon-filter px-4 py-1 rounded-full bg-white/10 hover:bg-white/20 transition-colors" data-type="claymore">
双手剑
</button>
<button class="weapon-filter px-4 py-1 rounded-full bg-white/10 hover:bg-white/20 transition-colors" data-type="polearm">
长柄武器
</button>
<button class="weapon-filter px-4 py-1 rounded-full bg-white/10 hover:bg-white/20 transition-colors" data-type="catalyst">
法器
</button>
<button class="weapon-filter px-4 py-1 rounded-full bg-white/10 hover:bg-white/20 transition-colors" data-type="bow">
弓
</button>
</div>
<!-- 武器卡片网格 -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- 武器卡片 1 -->
<div class="weapon-card bg-dark/50 border border-secondary/30 rounded-xl overflow-hidden hover:border-accent/50 transition-all transform hover:scale-105 group" data-type="polearm">
<div class="relative h-64 overflow-hidden bg-gradient-to-br from-secondary/30 to-dark">
<img src="https://p11-doubao-search-sign.byteimg.com/pgc-image/2940a45c1f624d0aba1fb7ca1745645e~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765144910&x-signature=6J4HWmYafkJs8%2BZG6OSjprHJT%2Fw%3D"
alt="和璞鸢"
class="w-full h-full object-contain transition-transform group-hover:scale-110">
<div class="absolute top-2 right-2 flex space-x-1">
<i class="fa fa-star text-accent"></i>
<i class="fa fa-star text-accent"></i>
<i class="fa fa-star text-accent"></i>
<i class="fa fa-star text-accent"></i>
<i class="fa fa-star text-accent"></i>
</div>
</div>
<div class="p-4">
<h3 class="text-xl font-bold">和璞鸢</h3>
<div class="flex items-center mt-1">
<span class="bg-secondary/30 px-2 py-0.5 rounded text-xs">长柄武器</span>
<span class="ml-2 text-sm text-gray-300">攻击力: 46</span>
</div>
<p class="text-sm text-gray-400 mt-3">武器技能：昭理的鸢之枪 - 攻击力提高5%。此外，元素战技命中敌人后，会使攻击力进一步提高3%，持续6秒，最多叠加7层。</p>
<button class="view-weapon w-full py-1.5 rounded bg-secondary/30 hover:bg-secondary/50 transition-colors text-sm mt-3" data-weapon="skywardspine">
查看详情
</button>
</div>
这里空空如也
有帮助，赞一个