首页
旅人图鉴
图鉴资料
地图资料
武器图鉴
首饰图鉴
支援者图鉴
试炼之塔
秘技的试炼
职业的试炼
历战的试炼
攻略聚合
斗技大赛
历战NPC攻略
主线BOSS
追忆之塔
讨伐委托
新手攻略
支炎兽
管理
刷新本页缓存
页面操作
短链
移动
删除
保护
取消监视
链入页面
常用功能
沙盒
所有页面
特殊页面
Cargo表
Cargo查询
创建模板
文件列表
更改审核
最近更改
用户权限
用户组权限
评论管理
更改审核
全站配置
配置导航栏
配置整站通告
配置小组件
配置全局CSS
配置全局JS
全局测试CSS
全局测试js
JS/CSS版本
全站设置
组件使用帮助
新建页面提示
修改页面提示
删除页面原因
编辑版权警示
修改页面摘要
上传文件提示
上传文件协议
上传文件说明
编辑器上传文件说明
删除文件原因
其他
创建
攻略审核
WIKI贡献榜
WIKI反馈区
WIKI运维

抽卡模拟器测试版：修订间差异

更新日期： 2024-10-21  最新编辑：木丶阿伦

页面贡献者 :
无编辑摘要
无编辑摘要
 
（未显示同一用户的38个中间版本）
第1行： 第1行：
<div class="ck_main_area">
<div class="ck_main_area">
    <div class="title" id="pool_title"></div>
<div class="window_area" id="window_area">
        <div class="window_area" id="window_area">
<img class="img_ring ring" id="ring" src="" alt="" />
            <div class="img_ring ring_0" id="ring_0">[[File:db_ck_ring0.jpg|link=]]</div>
<img class="img_ring ring_0" id="ring_0" src="./img/ring2_0.jpg" alt="" />
            <div class="img_ring ring_1" id="ring_1">[[File:db_ck_ring1.jpg|link=]]</div>
<img class="img_ring ring_1" id="ring_1" src="./img/ring2_1.jpg" alt="" />
            <div class="img_ring ring_2" id="ring_2">[[File:db_ck_ring2.jpg|link=]]</div>
<img class="img_ring ring_2" id="ring_2" src="./img/ring2_2.jpg" alt="" />
            <div class="result_area">
<div class="result_area">
            </div>
</div>
        </div>
</div>
        <div class="btns_area">
<div class="btns_area">
            <div class="btn_start" id="btn_start_1">抽卡</div>
<div class="btn_start" id="btn_start_1">抽卡</div>
            <div class="btn_start" id="btn_start_10">抽卡*10</div>
<div class="btn_start" id="btn_start_2">抽卡*10</div>
        </div>
</div>
        <div class="all_Result"></div>
<div class="all_Result"></div>
        <div class="tips"><div class="tips">当前功能为测试版</div><div class="tips">实际抽卡概率请以游戏内为准</div></div>
<div class="tips">如有问题概不负责！</div>
        <div class="">切换至其他卡池</div>
</div>
        <div class="change_pool"></div>
 
    </div>
{{#css:
   
* {
    {{#css:
margin: 0;
   
padding: 0;
        .ck_main_area * {
}
            margin: 0;
.ck_main_area {
            padding: 0;
width: 100%;
            color: #000000;
max-width: 600px;
        }
min-width: 300px;
   
/* border: 4px solid #000000; */
        .ck_main_area {
margin: 0;
            width: 100%;
padding: 0;
            margin: auto;
/* box-sizing: border-box; */
            padding: 0;
}
            color: #000000;
.ck_main_area * {
            max-width: 800px;
box-sizing: border-box;
            min-width: 350px;
}
            min-height: 220px;
.ck_main_area .window_area {
        }
width: 100%;
        .ck_main_area .title{
aspect-ratio: 800/ 500;
            text-align: center;
border: 4px solid #FFFFFF;
        }
background-color: #000000;
        .ck_main_area .change_pool{
position: relative;
            cursor:pointer;
}
            text-decoration: underline;
.ck_main_area .window_area .img_ring {
        }
width: 100%;
   
height: 100%;
   
position: absolute;
        .ck_main_area * {
left: 0;
            box-sizing: border-box;
top: 0;
        }
display: none;
   
}
        .ck_main_area .window_area {
.ck_main_area .window_area .img_ring.ring {
            width: 100%;
animation: ring_in;
            aspect-ratio: 800/ 500;
animation-duration: 3s;
            background-color: #000000;
/* animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); */
            position: relative;
animation-timing-function: linear;
        }
animation-fill-mode: forwards;
   
position: absolute;
        .ck_main_area .window_area .img_ring {
left: 0;
            width: 100%;
top: 65px;
            height: 100%;
display: none;
            position: absolute;
}
            left: 0;
.ck_main_area .window_area .result_area {
            top: 0;
width: 100%;
            display: none;
height: 100%;
        }
padding: 0 20px 20px 20px;
   
background-color: #FFFFFF;
        .ck_main_area .window_area .img_ring.ring {
            animation: ring_in;
background-size: 100% 100%;
            animation-duration: 3s;
background-repeat: no-repeat;
            /* animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); */
/* position: absolute;
            animation-timing-function: linear;
left: 0;
            animation-fill-mode: forwards;
top: 0%;
            position: absolute;
padding: 4px; */
            left: 0;
/* opacity: 0; */
            top: 65px;
animation: window_white;
            display: none;
animation-duration: 2s;
        }
animation-timing-function: linear;
   
animation-fill-mode: forwards;
        .ck_main_area .window_area .img_ring img {
display: none;
            width: 100%;
flex-direction: row;
            aspect-ratio: 800 / 500;
align-items: center;
        }
flex-wrap: wrap;
   
justify-content: center;
        .ck_main_area .window_area .result_area {
overflow-y: auto;
            width: 100%;
}
            height: 100%;
.ck_main_area .window_area .result_area .role_area {
            padding: 0 20px 20px 20px;
width: 18%;
            background-color: #FFFFFF;
height: auto;
            background-size: 100% 100%;
padding-top: 10px;
            background-repeat: no-repeat;
margin: 2px;
            animation: window_white;
text-align: center;
            animation-duration: 2s;
font-size: 12px;
            animation-timing-function: linear;
line-height: 20px;
            animation-fill-mode: forwards;
position: relative;
            display: none;
}
            flex-direction: row;
.ck_main_area .window_area .result_area .role_area .text {
            align-items: center;
text-align: left;
            flex-wrap: wrap;
margin-left: 10px;
            justify-content: center;
}
        }
.ck_main_area .window_area .result_area .role_area .img {
   
width: 100%;
        .ck_main_area .window_area .result_area .role_area {
aspect-ratio: 1;
            width: 18%;
height: auto;
            aspect-ratio: 130 / 190;
}
            padding-top: 10px;
.ck_main_area .window_area .result_area .role_area .img_xs {
            margin: 2px;
position: absolute;
            text-align: center;
right: 0;
            font-size: 12px;
bottom: 0;
            line-height: 20px;
width: 50%;
            position: relative;
height: auto;
        }
}
   
        .ck_main_area .window_area .result_area .role_area .text {
.ck_main_area .btns_area {
            text-align: left;
display: flex;
            margin-left: 10px;
flex-direction: row;
            white-space: nowrap;
justify-content: space-around;
            overflow: hidden;
}
            text-overflow: ellipsis;
.ck_main_area .btns_area .btn_start {
            line-height: 16px;
cursor: pointer;
        }
width: 120px;
   
text-align: center;
        .ck_main_area .window_area .result_area .role_area .img {
padding: 4px 0;
            width: 100%;
margin-bottom: 10px;
            aspect-ratio: 1;
border: 4px solid #000000;
        }
}
   
.ck_main_area .all_Result {
        .ck_main_area .window_area .result_area .role_area .img_xs {
width: 100%;
            position: absolute;
font-size: 12px;
            right: 0;
text-align: center;
            bottom: 0;
height: 54px;
            width: 50%;
}
            height: auto;
.ck_main_area .tips {
        }
color: gray;
   
font-size: 12px;
        .ck_main_area .btns_area {
text-align: center;
            display: flex;
}
            flex-direction: row;
            justify-content: space-around;
@keyframes ring_in {
        }
0% { left: 0px; scale: 0;}
   
100% { left: 140px; scale: 1;}
        .ck_main_area .btns_area .btn_start {
}
            cursor: pointer;
@keyframes window_white {
            width: 120px;
0% { opacity: 0; }
            text-align: center;
100% { opacity: 1;}
            padding: 4px 0;
}
            margin-bottom: 10px;
            margin-top: 10px;
 
            border: 4px solid #000000;
}}
        }
 
   
{{ResourceLoader|MediaWiki:Dbck.js|isModuleES6=true}}
        .ck_main_area .all_Result {
            width: 100%;
            font-size: 12px;
            text-align: center;
            min-height: 54px;
        }
   
        .ck_main_area .tips {
            color: gray;
            font-size: 12px;
            text-align: center;
        }
   
        @keyframes ring_in {
            0% {
                left: 0px;
                scale: 0;
            }
   
            100% {
                left: 140px;
                scale: 1;
            }
        }
   
        @keyframes window_white {
            0% {
                opacity: 0;
            }
   
            100% {
                opacity: 1;
            }
        }
    @media screen and (max-width: 600px) {
    .ck_main_area .window_area .result_area .role_area .text {
    font-size: 8px !important;
    margin-left:0;
    }
   
    }
    }}
   
    {{ResourceLoader|MediaWiki:Db_role_data.js|isModuleES6=true}}
    {{ResourceLoader|MediaWiki:Ck_main.js|isModuleES6=true}}

2024年10月21日 (一) 21:44的最新版本

db ck ring0.jpg
db ck ring1.jpg
db ck ring2.jpg
抽卡
抽卡*10
当前功能为测试版
实际抽卡概率请以游戏内为准
切换至其他卡池




取自“https://wiki.17173.com/octopathsp/index.php?title=抽卡模拟器测试版&oldid=37953”
关于17173 | 人才招聘 | 广告服务 | 商务洽谈 | 联系方式 | 客服中心 | 网站导航
Copyright © 2001 - 2024 17173. All rights reserved.