查看“︁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>


</div><!--左栏结束-->
<!--右栏-->
<div class="card_content_rght" 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 style="margin-top:8px">对敌方造成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.5;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.5;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 style="margin-top:8px">对当前目标方向投掷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.5;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.5;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>
<!--右栏结束-->
</div><!-- 0. ---------------正文内容结束-->

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





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