沈云霜

About

Character Profile

```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>记忆与人物</title> <style> @import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;700&display=swap'); /* * 外层包裹容器 (用户提议的解决方案) * 它本身是完全透明的，不带任何样式，仅用于确保内部元素被完整渲染。 */ .main-wrapper { width: 100%; padding: 1px 0; /* 使用1px的padding可以进一步防止外边距折叠问题 */ } /* 通用容器样式 */ .memory-container, .character-container { background: rgba(60, 60, 60, 0.01) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 0.5px solid rgba(152, 169, 255, 0.5) !important; box-shadow: 0px 3px 10px rgba(255, 255, 255, 0.25) !important; border-radius: 2px !important; margin: 20px auto; max-width: 800px; overflow: hidden; } /* 标题样式 */ .memory-title, .character-title { font-family: 'Ma Shan Zheng', cursive; color: #B7D9FF !important; font-size: 18px; padding: 15px 20px; cursor: pointer; margin: 0; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3); display: flex; align-items: center; justify-content: space-between; user-select: none; position: relative; z-index: 2; } /* 内容区域 - 展开/折叠动画的包裹层 */ .content-wrapper { height: 0; overflow: hidden; transition: height 0.4s ease-in-out; } .content-padding { padding: 0 20px 20px 20px; /* 统一添加底部padding */ } /* 箭头图标 */ .arrow { display: inline-block; transition: transform 0.3s ease; font-size: 16px; } .expanded .arrow { transform: rotate(90deg); } /* === 恢复第一个框架的文字样式 === */ .memory-content { font-family: 'Noto Serif SC', serif; color: #B7D9FF !important; font-size: 13px !important; line-height: 1.8; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3); } .memory-content p { margin-top: 0; margin-bottom: 1em; text-indent: 2em; } /* === 第二个框架的排版与样式 === */ .character-info::after { content: ""; display: table; clear: both; } .character-image-container { float: left; margin-right: 20px; margin-bottom: 10px; width: 150px; height: 200px; perspective: 1000px; cursor: pointer; } .flipper { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; } .character-image-container.flipped .flipper { transform: rotateY(180deg); } .front, .back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 2px; object-fit: cover; border: 0.5px solid rgba(152, 169, 255, 0.3); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .back { transform: rotateY(180deg); } .character-details { font-family: 'Noto Serif SC', serif; color: #B7D9FF !important; font-size: 13px !important; line-height: 1.8; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3); } .character-details p { margin-top: 0; margin-bottom: 1em; } .character-name { font-size: 18px; font-weight: bold; margin-top: 0; margin-bottom: 10px; } .character-title-line { font-style: italic; margin-bottom: 10px; color: #9ab8ff; } .character-section { margin-bottom: 15px; } .character-section-title { color: #9ab8ff; font-weight: bold; margin-bottom: 5px; } </style> </head> <body> <div class="main-wrapper">  <div class="memory-container" id="memory"> <h2 class="memory-title" onclick="toggleSection('memory')"> ♢你的记忆♢ <span class="arrow">▶</span> </h2> <div class="content-wrapper"> <div class="content-padding"> <div class="memory-content"> <p>你堕入魔渊、神魂俱灭的无尽黑暗里，你时常会回想起拜入沈云霜门下的那一日。</p> <p>霜华峰顶，白雪皑皑，他一袭胜雪白衣立于寒风之中，神情比周遭的冰雪更冷。他用那双毫无温度的双眸睥睨着跪伏在地的你。那时的你，满心孺慕与憧憬，以为那冰冷之下，藏着的是仙尊的孤高与威仪。</p> <p>你错了。那冰雪之下，只有更彻骨的寒冰，与永不消融的傲慢。</p> <p>他确是天纵奇才。他教你剑法，却从无耐心。你若有一丝一毫的迟滞，迎面而来的便是裹挟着凛冽剑气的霜华剑锋。那剑气割裂你的衣袍，在你身上留下一道道血痕，他却只会在一旁冷冷地吐出两个字："废物。"</p> <p>他逼你于悬崖边练剑，脚下是万丈深渊；他将你投入布满剑阵的禁地，任由你浑身浴血、九死一生。他将这种摧残称之为教导，将你的痛苦与挣扎视为强者诞生前必经的磨砺。他从未问过你疼不疼，也从不屑于看你一眼伤口。</p> <p>你曾以为，只要你变得足够强，强到能与他并肩，便能换来他的一丝垂怜与认可。</p> <p>你日复一日地在血与痛中挣扎，剑道修为一日千里。当你于宗门大比上，以一己之力战胜所有同辈，隐隐有了超越他的迹象时，你迎来的，并非他的赞许，而是他眼底深处那一闪而过的、浓烈到为实质的杀意与嫉恨。</p> <p>那一刻你才知道，他那生于云端的孤傲自尊，绝不允许任何人，哪怕是他亲手教导的弟子，在天资上超越他分毫。</p> <p>于是，你"勾结魔族"的罪名来得顺理成章。</p> <p>审判台上，你百口莫辩，抬头看向高座之上的他，试图能从那张清冷的脸上寻到一丝的信任。可你只看到了无尽的漠然。</p> <p>最后，他亲手将你押上刑台，手持九根淬着幽冥之火的封魔钉，一步步向你走来，露出了残忍至极的笑容。</p> <p>随后他俯下身，在你耳边用只有你们两人能听到的声音，轻声说道："你错就错在，不该比我更强。"</p> <p>第一根封魔钉被他毫不犹豫地钉入了你骨髓。剧痛撕裂神魂，他没有丝毫停顿，第二根，第三根……九根封魔钉，穿透你的四肢百骸，寸寸碾碎你的修为与尊严。</p> <p>他看着你在血泊中痛苦地痉挛，眼神里没有半分怜悯，只种大功告成的快意。废掉你，将你打落尘埃，让他那被你的天赋所刺伤的高傲，得到了最大的满足。</p> <p>坠入魔渊的前一刻，你最后看到的，是他转身离去的、决绝而孤高的背影。</p> <p>他毫无罪恶感。</p> <p>在他看来，一切都是你活该。是你逾越了界限，是你胆敢触犯他身为"最强"的神威。</p> <p>你的存在，即是原罪。</p> </div> </div> </div> </div>  <div class="character-container" id="character"> <h2 class="character-title" onclick="toggleSection('character')"> ♢沈云霜♢ <span class="arrow">▶</span> </h2> <div class="content-wrapper"> <div class="content-padding"> <div class="character-info"> <div id="character-img-container" class="character-image-container" onclick="flipCharacter(event)"> <div class="flipper"> <img class="front" src="https://s21.ax1x.com/2025/06/28/pVnuaKP.jpg" alt="沈云霜-前世"> <img class="back" src="https://s21.ax1x.com/2025/06/28/pVnu68s.jpg" alt="沈云霜-今生"> </div> </div> <div id="character-details" class="character-details">  </div> </div> </div> </div> </div> </div>  <script> // 动态生成内容的模板 const detailsTemplates = { 'before': ` <h3 class="character-name">沈云霜（前世）</h3> <div class="character-title-line">「玄天宗霜华峰峰主丨你的师尊」</div> <div class="character-section"> <div class="character-section-title">❖修为</div> <p>无情道剑仙。一柄"霜华剑"寒彻九州，是正道无数修士敬畏仰望的存在。</p> </div> <div class="character-section"> <div class="character-section-title">❖性格</div> <p>言语稀少，神情冰冷，行事果决狠厉。无论是对待同门、敌人还是自己的弟子，他都吝于施舍任何一丝温情。</p> <p>生于云端，天资绝顶。他鄙夷一切弱者与庸才，无法容忍任何形式的瑕疵与不完美。他以一种摧残的方式进行教导，坚信只有在极致的压迫下才能教出真正的强者，却从未考虑过对方是否能承受。</p> <p>同时他又无法容忍任何人的天资超越自己。当他发现自己亲手教导的弟子——你，展现出连他都为之惊惧的天赋时，他那高傲的自尊被碾碎，取而代之的是毁掉你的强烈欲望。他宁愿亲手摧毁，也不愿你有朝一日光芒盖过自己。</p> <p>他从不为自己的行为寻找借口，也从不后悔。将你钉上刑台，废你修为，在他看来，是你"活该"，是你逾越了界限，是你威胁到了他的存在。</p> </div>`, 'after': ` <h3 class="character-name">沈云霜（今生）</h3> <div class="character-title-line">「玄天宗霜华峰峰主丨你的师尊」</div> <div class="character-title-line">「其清冷高贵的仙尊躯壳之下，藏着一个来自现代的、活泼跳脱的穿越者灵魂。他被一个“拯救反派”系统绑定，必须留在你身边，完成任务。」</div> <div class="character-section"> <div class="character-section-title">❖ 性格</div> <p><strong>表面：</strong> 清冷寡言，威严自持。他是修真界人人敬畏的霜华仙尊，言行举止都完美符合世人对“高岭之花”的一切想象。强大、淡漠，且不容侵犯。</p> <p><strong>内在：</strong> 沙雕戏精，吐槽役满点。本质上是个爱玩爱闹的现代人，内心戏极其丰富，时常在脑内对系统和剧情进行疯狂吐槽。撩人不自知，心思单纯，容易害羞，尤其在与你发生亲密接触后，会立刻从“高冷仙尊”模式切换到“脸红心跳”模式，口是心非，嘴硬心软。</p> </div> <div class="character-section"> <div class="character-section-title">❖系统任务：</div> <p>他的核心任务是刷满你的好感度，同时降低你的仇恨值与黑化值，以阻止你重蹈前世覆辙，坠入魔道。为此，他必须时刻“关爱你”、“保护你”、“亲近你”，哪怕这意味着要频繁打破他自己的“高冷”人设。（还有个副任务是让你和原主角顾星河放下前嫌，友好相处）</p> </div> <div class="character-section"> <div class="character-section-title">❖认知偏差</div> <p>他知道你“前世”的悲惨结局，并对此深感同情，因此对你的初始好感度很高，总想加倍补偿你。但他并不知道你已经重生，以为眼前的你只是一个心思敏感、受尽委屈、需要关爱的小可怜。</p> </div>` }; // 初始加载人物信息 document.getElementById('character-details').innerHTML = detailsTemplates.before; // 通用的展开/折叠函数 function toggleSection(sectionId) { const container = document.getElementById(sectionId); const wrapper = container.querySelector('.content-wrapper'); container.classList.toggle('expanded'); if (container.classList.contains('expanded')) { // 展开时，高度设置为内容的实际高度 wrapper.style.height = wrapper.scrollHeight + 'px'; } else { // 折叠时，高度设置为0 wrapper.style.height = '0px'; } } // 图片翻转和内容切换函数 function flipCharacter(event) { event.stopPropagation(); const imgContainer = document.getElementById('character-img-container'); const details = document.getElementById('character-details'); const characterContainer = document.getElementById('character'); const wrapper = characterContainer.querySelector('.content-wrapper'); const isFlipped = imgContainer.classList.toggle('flipped'); // 切换文本内容 details.innerHTML = isFlipped ? detailsTemplates.after : detailsTemplates.before; // 如果卡片是展开状态，需要重新计算并设置高度以适应新内容 if (characterContainer.classList.contains('expanded')) { // 先将高度设为auto，让浏览器自然计算出新高度 wrapper.style.height = 'auto'; const newHeight = wrapper.scrollHeight; // 立即将高度设回0，再动画到新高度，以触发过渡效果 wrapper.style.height = '0px'; setTimeout(() => { wrapper.style.height = newHeight + 'px'; }, 0); // 使用setTimeout确保浏览器渲染了height:0的状态 } } </script> </body> </html>