查看“︁Sandbox”︁的源代码

<div class ="card_fullscreen-img">[[file:test卡面.jpg]]</div>
<div class="card_hero" style="height:100vh"></div>
<!-- 大框架容器 -->
<!--全屏大小--><div class="card_content-container" style="width:100vw;margin-top:-30vh;position:relative;transform:translate(-50%);left:50%">
<!--正文上方遮罩><div class="card_content-overlay" style="width:100%;height:120px;"></div>-->
<!--背景--><div class="card_content-background">
<!-- text area--><div class="card_content" style="display:flex;align-items:flex-start;gap:60px;">


<!-- 0. ---------------正文内容开始-->
<!--左栏sticky-->
<div class="card_content_left" style="position:sticky;top:320px;transform: translateY(-220px);width: max-content;min-width: 380px;">
<!-- 1. 卡名 card_content_name -->
<div class="card_content_name-container" style="width:100%">

<div style="display:flex;margin-left:2px"><div class="card_content_name-icon">[[file:icon_class_特攻.png|32px]]</div><div style="font-size:large;margin-left:6px">特攻</div>
<div class="card_content_name-icon" style="margin-left:8px;">[[file:icon_class_特攻.png|32px]]</div><div style="font-size:large;margin-left:6px">我说这是私欲</div></div>

<div class="card_content_name-text" style="font-family:serif;font-weight:bold;font-size:xx-large;margin-top:4px">复仇童谣 <span style="color:#ff7676;">·</span> 幽灵</div>
</div>

<!-- 2. 情报 card_content_info-->
<div class="card_content-item-title" style="font-size:x-large;font-family:serif;font-weight:bold;margin-top:36px;">信息<span style="font-size:small;margin-left:8px">Info</span></div>
<div class="card_content-item-hr" style="width:50px;height:2px;background:#ff7676;margin-bottom:4px"></div>
<div class="card_content_info">
    <div class="card_content_info-item">
        <div>情报</div>
        <div>※3</div>
    </div>

    <div class="card_content_info-item">
        <div>物资</div>
        <div>※2</div>
    </div>

    <div class="card_content_info-item">
        <div>执行</div>
        <div>※1</div>
    </div>

    <div class="card_content_info-item">
        <div>策略</div>
        <div>※3</div>
    </div>
</div>

<!-- 3.满级属性 -->
<div class="card_content-item-title" style="font-size:x-large;font-family:serif;font-weight:bold;margin-top:36px;">等级 100 <span style="font-size:small;margin-left:8px">Lv. Max</span></div>
<div class="card_content-item-hr" style="width:50px;height:2px;background:#ff7676;margin-bottom:4px"></div>
<!--属性item--><div class="card_content_attribute-item" style="width:240px;display:flex;justify-content:space-between"><div class="card_content_attribute-title" style="display:flex;gap:4px;align-items: center;"><div class="card_content_attribute-icon" style="width:12px;height:12px;background:rgba(255,255,255,0.6)"></div><div> 生命</div></div><div>150044</div></div>
<!--属性item--><div class="card_content_attribute-item" style="width:240px;display:flex;justify-content:space-between"><div class="card_content_attribute-title" style="display:flex;gap:4px;align-items: center;"><div class="card_content_attribute-icon" style="width:12px;height:12px;background:rgba(255,255,255,0.6)"></div><div> 攻击</div></div><div>8655</div></div>
<!--属性item--><div class="card_content_attribute-item" style="width:240px;display:flex;justify-content:space-between"><div class="card_content_attribute-title" style="display:flex;gap:4px;align-items: center;"><div class="card_content_attribute-icon" style="width:12px;height:12px;background:rgba(255,255,255,0.6)"></div><div> 防御</div></div><div>4875</div></div>
<!--属性item--><div class="card_content_attribute-item" style="width:240px;display:flex;justify-content:space-between"><div class="card_content_attribute-title" style="display:flex;gap:4px;align-items: center;"><div class="card_content_attribute-icon" style="width:12px;height:12px;background:rgba(255,255,255,0.6)"></div><div> 暴击率</div></div><div>5%</div></div>
<!--属性item--><div class="card_content_attribute-item" style="width:240px;display:flex;justify-content:space-between"><div class="card_content_attribute-title" style="display:flex;gap:4px;align-items: center;"><div class="card_content_attribute-icon" style="width:12px;height:12px;background:rgba(255,255,255,0.6)"></div><div> 暴击伤害</div></div><div>50%</div></div>

<!--属性结束-->


</div><!--左栏结束-->
<!--右栏-->
<div class="card_content_right" style="width:100%">
<!-- 2-1.技能 -->
<div class="card_content-item-title" style="font-size:x-large;font-family:serif;font-weight:bold;margin-top:36px;">战斗技能<span style="font-size:small;margin-left:8px">Tactical</span></div>
<div class="card_content-item-hr" style="width:50px;height:2px;background:#ff7676;margin-bottom:12px"></div>

<!--普攻-->
<div class="card_content_skill-card" style="width:620px;display:flex;gap:40px;align-items:flex-start;background: #ffffff14;padding:12px;border-radius: 5px;">

<div style="width:340px;display:flex;flex-direction:column">

<div class="card_content_skill-title" style="display:flex;gap:12px;align-items:flex-start">
<div style="width:48px;height:48px;background:rgba(255,255,255,0.7);flex-shrink:0;"></div>

<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:2px">
<div><span style="font-family:serif;font-weight:bold;">复仇的低吟</span><span style="color:#ed4141;margin-left:4px">[普通攻击]</span></div>
<div style="font-size:small;color:grey;margin-top:-2px;">使用武器 <span style="color:#ed4141;margin-left:6px">炸弹</span></div>
</div>
</div>
<div class="card_content_skill_effect" style="margin-top:8px;line-height:1.3">对敌方造成89%伤害。</div>
</div>
<div style="flex:1;min-width:0;display:flex;flex-direction:column;color:#272727">
<div class="card_content_skill-level-item" style="background:rgba(255,118,118,0.04);position:relative;margin-top:4px;padding:3px 0 6px 0"><span class="card_content_skill-level-number" style="position:absolute;left:0;top:0;width:16px;height:16px;font-size:0.75rem;font-weight:700;color:#fff;text-align:center;line-height:16px;border-radius:50%;box-shadow:0 2px 4px rgba(153,153,153,0.1);font-family:serif;background:#ff8787;padding-left:6px">2</span><div class="card_content_skill-level-effect" style="font-size:0.85rem;line-height:1.3;padding-left:42px;position:relative"><span class="card_content_skill-level-arrow" style="position:absolute;left:24px;color:#ff7676">→</span>伤害提升至110%</div>
</div>

<div class="card_content_skill-level-item" style="background:rgba(255,118,118,0.04);position:relative;margin-top:6px;padding:3px 0 6px 0"><span class="card_content_skill-level-number" style="position:absolute;left:0;top:0;width:16px;height:16px;font-size:0.75rem;font-weight:700;color:#fff;text-align:center;line-height:16px;border-radius:50%;box-shadow:0 2px 4px rgba(153,153,153,0.1);font-family:serif;background:#ff8787;padding-left:6px">3</span><div class="card_content_skill-level-effect" style="font-size:0.85rem;line-height:1.3;padding-left:42px;position:relative"><span class="card_content_skill-level-arrow" style="position:absolute;left:24px;color:#ff7676">→</span>附加持续伤害效果</div>
</div>
</div>
</div>
<div style="height:18px"></div>

<!--被动-->
<div class="card_content_skill-card" style="width:620px;display:flex;gap:40px;align-items:flex-start;background: #ffffff14;padding:12px;border-radius: 5px;">

<div style="width:340px;display:flex;flex-direction:column">

<div class="card_content_skill-title" style="display:flex;gap:12px;align-items:flex-start">
<div style="width:48px;height:48px;background:rgba(255,255,255,0.7);flex-shrink:0;"></div>

<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:2px">
<div><span style="font-family:serif;font-weight:bold;">奇袭战术</span><span style="color:#ed4141;margin-left:4px">[被动]</span></div>
<div style="font-size:small;color:grey;margin-top:-2px">触发条件 <span style="margin-left:6px">每进行<span style="color:#ed4141">15</span>次普攻</span></div>
</div>
</div>
<div style="display:flex;gap:4px;line-height:0.9;margin-top:6px">
<div style="font-size:small;background:#000000a3;color:#ffffff;padding:4px;">单体</div>
<div style="font-size:small;background:#000000a3;color:#ffffff;padding:4px;">持续伤害</div>
</div>
<div class="card_content_skill_effect" style="margin-top:8px;line-height:1.3">对当前目标方向投掷3把匕首，共造成111%伤害，若目标存在<span style="color:#ed4141;">[持续伤害]</span>效果，则本次伤害提升80%</div>
</div>
<div style="flex:1;min-width:0;display:flex;flex-direction:column;color:#272727">
<div class="card_content_skill-level-item" style="background:rgba(255,118,118,0.04);position:relative;margin-top:4px;padding:3px 0 6px 0"><span class="card_content_skill-level-number" style="position:absolute;left:0;top:0;width:16px;height:16px;font-size:0.75rem;font-weight:700;color:#fff;text-align:center;line-height:16px;border-radius:50%;box-shadow:0 2px 4px rgba(153,153,153,0.1);font-family:serif;background:#ff8787;padding-left:6px">2</span><div class="card_content_skill-level-effect" style="font-size:0.85rem;line-height:1.3;padding-left:42px;;position:relative"><span class="card_content_skill-level-arrow" style="position:absolute;left:24px;color:#ff7676">→</span>触发次数降低至12次</div>
</div>
<div class="card_content_skill-level-item" style="background:rgba(255,118,118,0.04);position:relative;margin-top:6px;padding:3px 0 6px 0"><span class="card_content_skill-level-number" style="position:absolute;left:0;top:0;width:16px;height:16px;font-size:0.75rem;font-weight:700;color:#fff;text-align:center;line-height:16px;border-radius:50%;box-shadow:0 2px 4px rgba(153,153,153,0.1);font-family:serif;background:#ff8787;padding-left:6px">3</span><div class="card_content_skill-level-effect" style="font-size:0.85rem;line-height:1.3;padding-left:42px;position:relative"><span class="card_content_skill-level-arrow" style="position:absolute;left:24px;color:#ff7676">→</span>额外提升伤害20%</div>
</div>
</div>
</div>
<div style="height:18px"></div>

<!--终结技-->
<div class="card_content_skill-card" style="width:620px;display:flex;gap:40px;align-items:flex-start;background: #ffffff14;padding:12px;border-radius: 5px;">

<div style="width:340px;display:flex;flex-direction:column">

<div class="card_content_skill-title" style="display:flex;gap:12px;align-items:flex-start">
<div style="width:48px;height:48px;background:rgba(255,255,255,0.7);flex-shrink:0;"></div>

<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:2px">
<div><span style="font-family:serif;font-weight:bold;">无名的阵列</span><span style="color:#ed4141;margin-left:4px">[终结技]</span></div>
<div style="font-size:small;color:grey;margin-top:-2px">欲火消耗 <span style="margin-left:6px"><span style="color:#ed4141">4</span></span></div>
</div>
</div>
<div style="display:flex;gap:4px;line-height:0.9;margin-top:6px">
<div style="font-size:small;background:#000000a3;color:#ffffff;padding:4px;">群攻</div>
<div style="font-size:small;background:#000000a3;color:#ffffff;padding:4px;">持续伤害</div>
</div>
<div class="card_content_skill_effect" style="margin-top:8px;line-height:1.3">对扇形范围内敌方造成305%伤害，若目标存在[持续伤害]，则本次伤害提升50%</div>
</div>
<div style="flex:1;min-width:0;display:flex;flex-direction:column;color:#272727">
<div class="card_content_skill-level-item" style="background:rgba(255,118,118,0.04);position:relative;margin-top:4px;padding:3px 0 6px 0"><span class="card_content_skill-level-number" style="position:absolute;left:0;top:0;width:16px;height:16px;font-size:0.75rem;font-weight:700;color:#fff;text-align:center;line-height:16px;border-radius:50%;box-shadow:0 2px 4px rgba(153,153,153,0.1);font-family:serif;background:#ff8787;padding-left:6px">2</span><div class="card_content_skill-level-effect" style="font-size:0.85rem;line-height:1.3;padding-left:42px;;position:relative"><span class="card_content_skill-level-arrow" style="position:absolute;left:24px;color:#ff7676">→</span>我随便写的</div>
</div>
<div class="card_content_skill-level-item" style="background:rgba(255,118,118,0.04);position:relative;margin-top:6px;padding:3px 0 6px 0"><span class="card_content_skill-level-number" style="position:absolute;left:0;top:0;width:16px;height:16px;font-size:0.75rem;font-weight:700;color:#fff;text-align:center;line-height:16px;border-radius:50%;box-shadow:0 2px 4px rgba(153,153,153,0.1);font-family:serif;background:#ff8787;padding-left:6px">3</span><div class="card_content_skill-level-effect" style="font-size:0.85rem;line-height:1.3;padding-left:42px;position:relative"><span class="card_content_skill-level-arrow" style="position:absolute;left:24px;color:#ff7676">→</span>额外提升伤害20000000%</div>
</div>
</div>
</div><!--技能栏结束-->

<!--2-2. 风格觉醒-->
<div class="card_content-item-title" style="font-size:x-large;font-family:serif;font-weight:bold;margin-top:36px;">觉醒<span style="font-size:small;margin-left:8px">Feat</span></div>
<div class="card_content-item-hr" style="width:50px;height:2px;background:#ff7676;margin-bottom:12px"></div>
<ul style="list-style:none;padding:0;margin-left:0">

<li class="card_content_feat-list" style="padding:0.8rem 0;margin-bottom:0.8rem;">
<div style="display:flex;align-items:center;">
<div style="position:relative;margin-right:2rem;">
<p><span class="card_content_feat-stage" style="position: absolute;top: -12px;left: 2px;font-size: 0.7rem;letter-spacing: 1px;">STAGE</span></p>
<div class="card_content_feat-number" style="width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-weight:700;">01</div>
</div>
<div>
<span style="color:#ed4141">终结技对存在[持续伤害]的目标，伤害额外提升10%。</span><br/>攻击加成提升3.0%<span class="card_content_feat-stage-cn" style="font-size: 0.8rem;margin-right: 0.5rem;font-family: serif;">[沉默是金Ⅰ]</span>
</div>
</div>
</li>

<li class="card_content_feat-list" style="padding:0.8rem 0;margin-bottom:0.8rem;">
<div style="display:flex;align-items:center;">
<div style="position:relative;margin-right:2rem;">
<p><span class="card_content_feat-stage" style="position: absolute;top: -12px;left: 2px;font-size: 0.7rem;letter-spacing: 1px;" >STAGE</span></p>
<div class="card_content_feat-number" style="width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-weight:700;">02</div>
</div>
<div>
攻击加成提升3.0%<span class="card_content_feat-stage-cn" style="font-size: 0.8rem;margin-right: 0.5rem;font-family: serif;">[沉默是金Ⅱ]</span>
</div>
</div>
</li>

<li class="card_content_feat-list" style="padding:0.8rem 0;margin-bottom:0.8rem;">
<div style="display:flex;align-items:center;">
<div style="position:relative;margin-right:2rem;">
<p><span class="card_content_feat-stage" style="position: absolute;top: -12px;left: 2px;font-size: 0.7rem;letter-spacing: 1px;">STAGE</span></p>
<div class="card_content_feat-number" style="width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-weight:700;">03</div>
</div>
<div>
攻击加成提升3.0%<span class="card_content_feat-stage-cn" style="font-size: 0.8rem;margin-right: 0.5rem;font-family: serif;">[沉默是金Ⅲ]</span>
</div>
</div>
</li>

<li class="card_content_feat-list" style="padding:0.8rem 0;margin-bottom:0.8rem;">
<div style="display:flex;align-items:center;">
<div style="position:relative;margin-right:2rem;">
<p><span class="card_content_feat-stage" style="position: absolute;top: -12px;left: 2px;font-size: 0.7rem;letter-spacing: 1px;">STAGE</span></p>
<div class="card_content_feat-number" style="width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-weight:700;">04</div>
</div>
<div>
攻击加成提升3.0%<span class="card_content_feat-stage-cn" style="font-size: 0.8rem;margin-right: 0.5rem;font-family: serif;">[沉默是金Ⅳ]</span>
</div>
</div>
</li>

<li class="card_content_feat-list" style="padding:0.8rem 0;margin-bottom:0.8rem;">
<div style="display:flex;align-items:center;">
<div style="position:relative;margin-right:2rem;">
<p><span class="card_content_feat-stage" style="position: absolute;top: -12px;left: 2px;font-size: 0.7rem;letter-spacing: 1px;">STAGE</span></p>
<div class="card_content_feat-number" style="width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-weight:700;">05</div>
</div>
<div>
<span style="color:#ed4141">情报适配度提升1级：※2 → ※3</span><br/>攻击加成提升3.0%<span class="card_content_feat-stage-cn" style="font-size: 0.8rem;margin-right: 0.5rem;font-family: serif;">[沉默是金Ⅴ]</span>
</div>
</div>
</li>

</ul>



<!--2-3.小传部分-->
<!-- ================= Story ================= -->
<div class="card_content_story" style="margin-top:80px;">

<!-- 标题 -->
<div class="card_content-item-title" style="font-size:x-large;font-family:serif;font-weight:bold;">
角色小传<span style="font-size:small;margin-left:8px;opacity:0.6;">Story</span>
</div>
<div style="width:60px;height:2px;background:#ff7676;margin:12px 0 36px 0;"></div>

<!-- 折叠触发 -->
<div class="card_content_story-toggle"
data-collapsed="false"
style="text-align:right;margin-bottom:24px;font-size:0.8rem;color:#888;cursor:pointer;user-select:none;">
[ 折叠全部 ]
</div>

<!-- 时间轴 -->
<div class="card_timeline card_content_story-timeline"
style="position:relative;max-width:820px;padding-left:44px;transition:all .25s ease;">

<!-- 时间轴线 -->
<div class="card_timeline-line"
style="position:absolute;left:16px;top:6px;bottom:6px;width:1px;background:rgba(0,0,0,0.06);">
</div>


<!-- ===== Stage 1 ===== -->
<div class="card_timeline-item card_content_story-stage"
style="position:relative;margin-bottom:60px;">

<div class="card_timeline-node"
style="position:absolute;left:-30px;top:8px;width:8px;height:8px;border:2px solid #ff7676;background:#fff;border-radius:50%;">
</div>

<div style="font-size:0.78rem;color:#999;margin-bottom:8px;letter-spacing:0.5px;">
Lv.20 解锁
</div>

<!-- 小标题 -->
<div style="margin-bottom:14px;">
<span style="font-family:serif;font-size:1.1rem;font-weight:bold;">Ⅰ</span>
<span style="margin:0 6px;font-weight:600;">复仇童谣</span>
<span style="font-size:0.75rem;color:#aaa;margin-left:6px;">/ Story</span>
</div>

<div class="card_content_story-text"
style="line-height:1.95;font-size:0.95rem;color:#292929;text-align:justify;">
夜已经深了，静谧的黑暗中，模糊的光微弱地闪烁着。
今年格外寒冷，还不到落雪的时候，霜就已经攀上窗户。
壁炉熊熊燃烧着，身穿洁白睡衣的孩子们围在壁炉边，像一群染
上橘色的雪人。幽灵被他们簇拥于中间，面上仍然平淡地维持笑意。
这群新收容的孩子格外闹腾，没有半点面对新环境的不安，几分
钟前甚至还吵着让幽灵念睡前故事。
抵不过他们的强烈要求，幽灵叹了口气，打开故事书。
《愿望精灵》是那种普通、平淡，但又能在畅销榜上占据一席的
故事。大概讲述了一个出身凄苦的男孩，身边人救助他并将这种救助
包装成“精灵”实现愿望，而长大后的男孩以同样的方式救助别人。
</div>

</div>


<!-- ===== Stage 2 ===== -->
<div class="card_timeline-item card_content_story-stage"
style="position:relative;margin-bottom:60px;">

<div class="card_timeline-node"
style="position:absolute;left:-30px;top:8px;width:8px;height:8px;border:2px solid #ff7676;background:#fff;border-radius:50%;">
</div>

<div style="font-size:0.78rem;color:#999;margin-bottom:8px;letter-spacing:0.5px;">
Lv.40 解锁
</div>

<div style="margin-bottom:14px;">
<span style="font-family:serif;font-size:1.1rem;font-weight:bold;">Ⅱ</span>
<span style="margin:0 6px;font-weight:600;">灰烬与火</span>
<span style="font-size:0.75rem;color:#aaa;margin-left:6px;">/ Story</span>
</div>

<div class="card_content_story-text"
style="line-height:1.95;font-size:0.95rem;color:#292929;text-align:justify;">
第二段小传正文……
</div>

</div>


<!-- 其余 Stage 同样结构 -->
<!-- Stage 3 / 4 / 5 自行复制即可 -->


</div>
</div>



</div>
<!--右栏结束-->
</div><!-- 0. ---------------正文内容结束-->

</div><!--背景结束-->





</div><!--容器结束-->
{{cardcss}}