设计风格；中式恐怖元素诡异道士风格颜色方案： #19171b #75020f #51080d #2b0307主要颜色搭配分上层渐变和下层渐变的主要颜色，但是你不能把所有颜色都混搭在一起，还有就是角色的图片框架颜色是单独的颜色，和这个主体颜色是分开的，现在我所提供的颜色就是角色的框架颜色#FCOF1F，并且图片框架里面要带有角色，这个是角**片的框架注意支持装饰角色框架的贴图装饰角色框架的贴图不是框架本身 https://s3.bmp.ovh/imgs/2025/07/29/719c10cebd3ac7f0.png。内部功能设计：世界观采用诡异元素搭配，并且采用贴图在右边的，框架里增添，并使得在上层涂层可穿透字体世界观的装饰必须在只能在世界观里面的，只能在世界观里面的框架里 https://s3.bmp.ovh/imgs/2025/07/29/fa2c07c6f8811d4d.png 角色设定和世界观是分开的，并且每个角色设定的左下角都会有一个符文贴图就是以下符文图案 https://s3.bmp.ovh/imgs/2025/07/29/91e3d4ac7453ff69.p

```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点数解答]

服务商

更多选项

快捷项