```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>尘寰异世</title> <style> :root { --frame-color: #FCOF1F; --bg-dark: #19171b; --red-dark: #51080d; --red-light: #75020f; --red-accent: #2b0307; } body { background: linear-gradient(to bottom, var(--bg-dark), var(--red-dark)); color: #e0d6d6; font-family: 'Noto Serif SC', serif; height: 100vh; margin: 0; overflow-x: hidden; position: relative; } .worldview-container { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); width: 300px; height: 80vh; background: var(--red-dark); border: 3px solid var(--frame-color); border-radius: 5px; padding: 15px; box-shadow: 0 0 20px rgba(235, 64, 52, 0.5); z-index: 10; overflow-y: auto; } .worldview-content { position: relative; height: 100%; mix-blend-mode: lighten; } .character-container { display: flex; width: 300%; height: 80vh; transition: transform 0.5s ease; } .character-slide { width: 33.33%; height: 100%; position: relative; } .character-frame { width: 80%; height: 90%; margin: 5% auto; border: 5px solid var(--frame-color); border-radius: 10px; position: relative; box-shadow: 0 0 30px rgba(252, 15, 31, 0.4); background: rgba(25, 23, 27, 0.7); overflow: hidden; } .character-image { width: 100%; height: 100%; object-fit: cover; } .character-info { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(81, 8, 13, 0.9), transparent); padding: 20px; } .rune-symbol { position: absolute; left: 10px; bottom: 10px; width: 50px; height: 50px; background-image: url('https://s3.bmp.ovh/imgs/2025/07/29/91e3d4ac7453ff69.png'); background-size: contain; background-repeat: no-repeat; opacity: 0.8; } .bell-decoration { position: absolute; right: 30px; top: 20px; width: 60px; height: 60px; background-image: url('https://s3.bmp.ovh/imgs/2025/07/29/c197ff90741a7a60.png'); background-size: contain; background-repeat: no-repeat; animation: float 3s ease-in-out infinite; z-index: 5; } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .quote { font-style: italic; color: #d4a373; margin-top: 10px; border-left: 2px solid var(--frame-color); padding-left: 10px; } .navigation { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 15px; z-index: 100; } .nav-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--red-light); cursor: pointer; transition: all 0.3s; } .nav-dot.active { background: var(--frame-color); transform: scale(1.3); } </style> </head> <body> <div class="bell-decoration"></div> <div class="worldview-container"> <div class="worldview-content"> <h2>尘寰异世</h2> <p>天庭崩塌，幽冥割裂，幽灵塔现世...</p> <p>这是一个科技与玄学交织的诡异世界...</p> </div> </div> <div class="character-container" id="characterSlider"> <div class="character-slide"> <div class="character-frame"> <img src="https://s3.bmp.ovh/imgs/2025/07/29/9e7931b6663798cd.jpg" alt="縠影" class="character-image"> <div class="character-info"> <h3>縠影</h3> <p>上古黑鳞玄蛇，修炼百万年的大妖</p> <p class="quote">"小东西，莫要在我面前耍花样。"</p> <div class="rune-symbol"></div> </div> </div> </div> <div class="character-slide"> <div class="character-frame"> <img src="https://s3.bmp.ovh/imgs/2025/07/29/c4f0fed340ba7417.jpg" alt="螣简" class="character-image"> <div class="character-info"> <h3>螣简</h3> <p>縠影之子，半妖半仙的存在</p> <p class="quote">"老汉儿，你又抽那么多烟！"</p> <div class="rune-symbol"></div> </div> </div> </div> <div class="character-slide"> <div class="character-frame"> <img src="https://s3.bmp.ovh/imgs/2025/07/29/80aab8d72f6488eb.jpg" alt="鹤梦松" class="character-image"> <div class="character-info"> <h3>鹤梦松</h3> <p>隐居道士，縠影的旧识</p> <p class="quote">"龟儿子，莫要碰我的法器！"</p> <div class="rune-symbol"></div> </div> </div> </div> </div> <div class="navigation"> <div class="nav-dot active" data-index="0"></div> <div class="nav-dot" data-index="1"></div> <div class="nav-dot" data-index="2"></div> </div> <script> const slider = document.getElementById('characterSlider'); const dots = document.querySelectorAll('.nav-dot'); let currentIndex = 0; function updateSlider(index) { slider.style.transform = `translateX(-${index * 33.33}%)`; dots.forEach(dot => dot.classList.remove('active')); dots[index].classList.add('active'); currentIndex = index; } dots.forEach(dot => { dot.addEventListener('click', () => { updateSlider(parseInt(dot.dataset.index)); }); }); // Touch and swipe functionality let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', e => { touchStartX = e.changedTouches[0].screenX; }, false); slider.addEventListener('touchend', e => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, false); function handleSwipe() { if (touchEndX < touchStartX && currentIndex < 2) { updateSlider(currentIndex + 1); } if (touchEndX > touchStartX && currentIndex > 0) { updateSlider(currentIndex - 1); } } </script> </body> </html> ``` 1. 角色滑动功能需要确保触摸事件和点击导航点都能正确工作 2. 世界观容器和角色容器是完全独立的，不要将它们的样式混用 3. 符文图案和铃铛装饰要保持在正确的位置，不受滑动影响 [2025-07-30 21:26:41 | AI写代码神器 | 2006点数解答]