查看“︁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:4px"></div>
<!--普攻-->
<div class="card_content_skill-card" style="width:240px;display:flex;flex-direction:column;margin-top:12px">
<div class="card_content_skill-title" style="display:flex;gap:12px;align-items: center">
<div class="card_content_skill-icon" style="width:48px;height:48px;background:rgba(255,255,255,0.7);"></div>
<div><span class="card_content_skill-name" style="font-family:serif;font-weight:bold;">复仇的低吟</span><span class="card_content_skill-type" style="color:#ed4141;margin-left:4px">[普通攻击]</span>
<div class="card_content_skill-weapon" style="display:flex;justify-content: space-between;"><div style="color:grey">使用武器</div><div style="color:#ed4141">炸弹</div></div>
</div>
</div><!--title结束，效果开始-->
<div class="card_content_skill_effect">对敌方造成89%伤害。</div>
</div>
<!--被动-->
<div class="card_content_skill-card" style="width:240px;display:flex;flex-direction:column;margin-top:12px">
<div class="card_content_skill-title" style="display:flex;gap:12px;align-items: center">
<div class="card_content_skill-icon" style="width:48px;height:48px;background:rgba(255,255,255,0.7);"></div>
<div><span class="card_content_skill-name" style="font-family:serif;font-weight:bold;">奇袭战术</span><span class="card_content_skill-type" style="color:#ed4141;margin-left:4px">[被动]</span>
<div class="card_content_skill-tags" style="display:flex;gap:4px"><div class="card_content_skill-tag" style="background: #000000a3;color: #ffffff;padding: 4px;line-height: 0.95;text-shadow: 0 0 2px rgb(255 255 255 / 24%), 1px 1px 1px rgb(255 0 0 / 19%), -1px 0 1px rgb(255 80 80 / 20%);">单体</div><div class="card_content_skill-tag" style="background: #000000a3;color: #ffffff;padding: 4px;line-height: 0.95;text-shadow: 0 0 2px rgb(255 255 255 / 24%), 1px 1px 1px rgb(255 0 0 / 19%), -1px 0 1px rgb(255 80 80 / 20%);">持续伤害</div></div>
</div>
</div><!--title结束，效果开始-->
<div class="card_content_skill_effect">对敌方造成89%伤害。</div>
</div>

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

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





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