<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESO Update 47 | 上古卷轴OL 47号更新速览</title>
<!-- TailwindCSS CDN -->
<script src="https://cdn.tailwindcss.com/3.4.3"></script>
<!-- Framer Motion CDN -->
<script src="https://cdn.jsdelivr.net/npm/framer-motion@10.16.4/dist/framer-motion.umd.min.js"></script>
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<style>
/* 自定义字体和全局样式 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700;900&family=Inter:wght@400;700&display=swap');
body {
font-family: 'Inter', 'Noto Sans SC', sans-serif;
background-color: #111111;
color: #E0E0E0;
overflow-x: hidden;
}
/* Bento Grid 单元格基础样式 */
.bento-box {
background-color: rgba(30, 30, 30, 0.8);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
position: relative;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* 科技感高亮渐变 */
.tech-highlight-cyan::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(0, 255, 255, 0.15) 0%, rgba(0, 255, 255, 0) 60%);
animation: rotateGlow 10s linear infinite;
}
.tech-highlight-magenta::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 0, 255, 0.15) 0%, rgba(255, 0, 255, 0) 60%);
animation: rotateGlow 12s linear infinite reverse;
}
@keyframes rotateGlow {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 标题和数字样式 */
.title-cn {
font-family: 'Noto Sans SC', sans-serif;
font-weight: 900;
font-size: clamp(1.5rem, 4vw, 2.5rem);
line-height: 1.2;
}
.subtitle-en {
font-size: clamp(0.8rem, 2vw, 1rem);
color: #999;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 0.5rem;
}
.huge-number {
font-weight: 700;
font-size: clamp(0.8rem, 2vw, 1rem);
line-height: 1;
color: #00FFFF; /* 高亮青色 */
}
.stat-change {
font-weight: 700;
color: #E0E0E0;
}
.stat-old {
text-decoration: line-through;
color: #888;
}
.stat-new {
color: #00FFFF;
}
/* 禁用默认滚动条 */
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
</style>
</head>
<body class="antialiased">
<div id="app" class="container mx-auto px-4 py-16 md:py-24">
<!-- Header -->
<header class="text-center mb-16 md:mb-24">
<h1 class="font-black text-5xl md:text-8xl text-white tracking-tighter">ESO 47号更新</h1>
<p class="text-xl md:text-2xl text-gray-400 mt-4">Feast of Shadows & Update 47 - 核心改动速览</p>
</header>
<!-- Bento Grid Layout -->
<main class="grid grid-cols-1 md:grid-cols-4 gap-6 auto-rows-[minmax(200px,auto)]">
<!-- 新内容总览 -->
<div data-motion class="bento-box md:col-span-2 tech-highlight-cyan">
<div class="z-10">
<h2 class="title-cn">全新内容登场</h2>
<p class="subtitle-en">New Content Overview</p>
<ul class="mt-4 space-y-2 list-none text-gray-300">
<li><i class="fa-solid fa-dungeon fa-fw mr-2 text-cyan-400"></i><strong class="text-white">新地城</strong>: Naj-Caldeesh & Black Gem Foundry</li>
<li><i class="fa-solid fa-dragon fa-fw mr-2 text-cyan-400"></i><strong class="text-white">新事件</strong>: Battle for the Writhing Wall</li>
<li><i class="fa-solid fa-star fa-fw mr-2 text-cyan-400"></i><strong class="text-white">生活质量</strong>: 坐骑游泳，任务对话回放等</li>
</ul>
</div>
</div>
<!-- 坐骑游泳 -->
<div data-motion class="bento-box md:col-span-2 relative flex items-center justify-center">
<div class="z-10 text-center">
<h2 class="title-cn">坐骑游泳实装</h2>
<p class="subtitle-en">Mount Swimming is Here</p>
<i class="fa-solid fa-water fa-10x text-cyan-500/10 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></i>
</div>
</div>
<!-- 战斗核心改动 -->
<div data-motion class="bento-box md:col-span-4 tech-highlight-magenta">
<div class="z-10">
<h2 class="title-cn">战斗核心机制调整</h2>
<p class="subtitle-en">Core Combat Changes</p>
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<p class="font-bold text-lg text-white">终极点生成被动共享冷却</p>
<p class="text-gray-400 text-sm">Ultimate generating passives now share their cooldowns.</p>
<p class="text-xs text-gray-500 mt-1">Affects Prism, Transfer, Mountain's Blessing, etc.</p>
</div>
<div>
<p class="font-bold text-lg text-white">多个技能延迟修复</p>
<p class="text-gray-400 text-sm">Fixed delays on multiple abilities.</p>
<p class="text-xs text-gray-500 mt-1">Combat Prayer, Blessing of Protection, etc. are now more responsive.</p>
</div>
</div>
</div>
</div>
<!-- 技能改动卡片: Shooting Star -->
<div data-motion class="bento-box flex flex-col justify-center items-center text-center">
<h3 class="font-bold text-xl mb-2">流星<span class="text-sm text-gray-400 ml-2">Shooting Star</span></h3>
<p class="text-gray-400">终极点消耗降低</p>
<div class="flex items-center gap-4 mt-4">
<span class="huge-number text-red-500 opacity-60">200</span>
<i class="fa-solid fa-arrow-right-long fa-2x text-gray-500"></i>
<span class="huge-number">185</span>
</div>
<p class="text-gray-400 mt-2">终极点回复 <span class="stat-old">12</span> <i class="fa-solid fa-arrow-right-long text-gray-600 mx-1"></i> <span class="stat-new">10</span>, 最多6个目标</p>
</div>
<!-- 技能改动卡片: Grim Focus -->
<div data-motion class="bento-box">
<h3 class="font-bold text-xl">冷酷专注<span class="text-sm text-gray-400 ml-2">Grim Focus</span></h3>
<p class="text-gray-400 mt-2">不再提供武器/法术伤害</p>
<div class="mt-4 space-y-2">
<p class="stat-change"><span class="stat-old">Weapon/Spell Damage</span> <i class="fa-solid fa-xmark text-red-500 mx-2"></i></p>
<p class="stat-change"><i class="fa-solid fa-check text-green-500 mx-2"></i> <span class="stat-new">现在提供大先知和大残暴</span></p>
<p class="text-gray-400 mt-2 text-sm">Relentless Focus morph now only requires 4 stacks.</p>
</div>
</div>
<!-- 技能改动卡片: Dark Cloak -->
<div data-motion class="bento-box">
<h3 class="font-bold text-xl">黑暗斗篷<span class="text-sm text-gray-400 ml-2">Dark Cloak</span></h3>
<p class="text-gray-400 mt-2">增益触发条件变更</p>
<div class="mt-4 space-y-2">
<p class="stat-change"><span class="stat-old">站立不动时</span> <i class="fa-solid fa-arrow-right-long text-gray-600 mx-1"></i> <span class="stat-new">格挡时触发额外治疗</span></p>
<p class="stat-change">持续时间 <span class="stat-old">5s</span> <i class="fa-solid fa-arrow-right-long text-gray-600 mx-1"></i> <span class="stat-new">3s</span></p>
</div>
</div>
<!-- 技能改动卡片: Catalyst -->
<div data-motion class="bento-box flex flex-col justify-center items-center text-center">
<h3 class="font-bold text-xl mb-2">催化剂<span class="text-sm text-gray-400 ml-2">Catalyst</span></h3>
<p class="text-gray-400">终极点获取削弱</p>
<div class="flex items-center gap-4 mt-4">
<span class="huge-number text-red-500 opacity-60">30</span>
<i class="fa-solid fa-arrow-right-long fa-2x text-gray-500"></i>
<span class="huge-number text-orange-400">22</span>
</div>
</div>
<!-- QoL 综合 -->
<div data-motion class="bento-box md:col-span-3 md:row-span-1 tech-highlight-cyan">
<div class="z-10">
<h2 class="title-cn">体验优化</h2>
<p class="subtitle-en">Quality of Life Improvements</p>
<div class="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-6">
<div class="text-center">
<i class="fa-solid fa-scroll fa-3x text-cyan-400 mb-2"></i>
<p class="font-bold text-white">调查报告可堆叠</p>
<p class="text-sm text-gray-400">Stackable Surveys</p>
</div>
<div class="text-center">
<i class="fa-solid fa-compass fa-3x text-cyan-400 mb-2"></i>
<p class="font-bold text-white">罗盘距离显示</p>
<p class="text-sm text-gray-400">Compass Improvements</p>
</div>
<div class="text-center">
<i class="fa-solid fa-sliders fa-3x text-cyan-400 mb-2"></i>
<p class="font-bold text-white">镜头灵敏度细分</p>
<p class="text-sm text-gray-400">More Camera Options</p>
</div>
</div>
</div>
</div>
<!-- 无尽档案 -->
<div data-motion class="bento-box text-center flex flex-col justify-center">
<i class="fa-solid fa-infinity fa-4x text-magenta-400 mb-4"></i>
<h2 class="title-cn text-2xl">无尽档案可重掷</h2>
<p class="subtitle-en">Infinite Archive Reroll</p>
</div>
<!-- 套装重做标题 -->
<div data-motion class="bento-box md:col-span-4 flex items-center justify-center text-center">
<h2 class="title-cn text-4xl">经典套装重做与平衡</h2>
<p class="subtitle-en absolute bottom-8">Classic Set Reworks & Balancing</p>
</div>
<!-- 套装改动: Bahsei & Coral Riptide -->
<div data-motion class="bento-box md:col-span-2">
<h3 class="font-bold text-xl">资源损耗型套装</h3>
<p class="subtitle-en">Missing Resource Sets</p>
<div class="mt-4 space-y-4">
<div>
<p class="font-semibold text-white">巴赛的狂热 <span class="text-sm text-gray-400">Bahsei's Mania</span></p>
<p class="text-sm text-gray-300">伤害增益 <span class="stat-old">12%</span> <i class="fa-solid fa-arrow-right-long text-gray-600 mx-1"></i> <span class="stat-new">10%</span>, 但现在在 <span class="stat-new">50%</span> 蓝量时达到上限。</p>
</div>
<div>
<p class="font-semibold text-white">珊瑚激流 <span class="text-sm text-gray-400">Coral Riptide</span></p>
<p class="text-sm text-gray-300">伤害增益 <span class="stat-old">740</span> <i class="fa-solid fa-arrow-right-long text-gray-600 mx-1"></i> <span class="stat-new">600</span>, 但现在在 <span class="stat-new">50%</span> 耐力时达到上限。</p>
</div>
</div>
</div>
<!-- 套装改动: Berserking Warrior & Highland Sentinel -->
<div data-motion class="bento-box md:col-span-2">
<h3 class="font-bold text-xl">堆叠暴击型套装</h3>
<p class="subtitle-en">Stacking Critical Sets</p>
<div class="mt-4 space-y-4">
<div>
<p class="font-semibold text-white">狂战 <span class="text-sm text-gray-400">Berserking Warrior</span></p>
<p class="text-sm text-gray-300">重做：现在提供基础暴击，层数上限 <span class="stat-old">10</span> <i class="fa-solid fa-arrow-right-long text-gray-600 mx-1"></i> <span class="stat-new">5</span>, 每层数值更高。</p>
</div>
<div>
<p class="font-semibold text-white">高地哨兵 <span class="text-sm text-gray-400">Highland Sentinel</span></p>
<p class="text-sm text-gray-300">重做：现在提供基础暴击，层数上限 <span class="stat-old">10</span> <i class="fa-solid fa-arrow-right-long text-gray-600 mx-1"></i> <span class="stat-new">3</span>, 每层数值更高。</p>
</div>
</div>
</div>
<!-- 新套装标题 -->
<div data-motion class="bento-box md:col-span-4 flex items-center justify-center text-center tech-highlight-magenta">
<div class="z-10">
<h2 class="title-cn text-4xl">地城全新掉落</h2>
<p class="subtitle-en">New Dungeon Sets</p>
</div>
</div>
<!-- 新套装: Naj-Caldeesh -->
<div data-motion class="bento-box md:col-span-2">
<h3 class="font-bold text-xl">Naj-Caldeesh</h3>
<div class="mt-4 space-y-3 text-sm">
<p><strong class="text-cyan-300">Xanmeer Spellweaver (轻甲):</strong> 提升5%元素伤害和15%元素状态效果伤害。</p>
<p><strong class="text-cyan-300">Tools of the Trapmaster (中甲):</strong> 非重击叠层，满蓄力重击消耗层数造成伤害并施加Sundered。</p>
<p><strong class="text-cyan-300">Stonehulk Domination (重甲):</strong> 嘲讽时对目标施加12秒的大易伤（15秒冷却）。</p>
<p><strong class="text-cyan-300">Bar-Sakka (怪物套):</strong> 翻滚创造血池，造成伤害并提供伤害护盾。</p>
</div>
</div>
<!-- 新套装: Black Gem Foundry -->
<div data-motion class="bento-box md:col-span-2">
<h3 class="font-bold text-xl">Black Gem Foundry</h3>
<div class="mt-4 space-y-3 text-sm">
<p><strong class="text-magenta-300">Lustrous Soulwell (轻甲):</strong> 使用终极技为你和3名队友提供三维回复。</p>
<p><strong class="text-magenta-300">Vykand's Soulfury (中甲):</strong> 满蓄力重击随机提供大战斗精神、大狂暴或大勇气。</p>
<p><strong class="text-magenta-300">Black Foundry Steel (重甲):</strong> 开始重击时自动免费格挡2秒（12秒冷却）。</p>
<p><strong class="text-magenta-300">Black Gem Monstrosity (怪物套):</strong> 施放灵魂魔法技能消耗灵魂石，之后轻/重击发射基于目标最大生命值的伤害。</p>
</div>
</div>
</main>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const motionElements = document.querySelectorAll('[data-motion]');
motionElements.forEach(el => {
const motion = new framer.Motion(el, {
initial: { opacity: 0, y: 50 },
whileInView: { opacity: 1, y: 0 },
transition: { duration: 0.6, ease: "easeOut" },
viewport: { once: true, amount: 0.3 }
});
});
});
</script>
</body>
</html>
index.html
style.css
index.js
index.html