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

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

更新日期： 2024-09-28  最新编辑：木丶阿伦

页面贡献者 :
无编辑摘要
无编辑摘要
第1行： 第1行：
<div class="ck_main_area">
<div class="ck_main_area">
<div class="window_area" id="window_area">
<div class="window_area" id="window_area">
<div class="img_ring ring_0" id="ring_0">[[File:db_ck_ring0.jpg|link=]]</div>
<div class="img_ring ring_0" id="ring_0">[[File:db_ck_ring0.jpg|link=]]</div>
<div class="img_ring ring_1" id="ring_1">[[File:db_ck_ring1.jpg|link=]]</div>
<div class="img_ring ring_1" id="ring_1">[[File:db_ck_ring1.jpg|link=]]</div>
<div class="img_ring ring_2" id="ring_2">[[File:db_ck_ring2.jpg|link=]]</div>
<div class="img_ring ring_2" id="ring_2">[[File:db_ck_ring2.jpg|link=]]</div>
<div class="result_area">
<div class="result_area">
</div>
</div>
<div class="btns_area">
<div class="btn_start" id="btn_start_1">抽卡</div>
<div class="btn_start" id="btn_start_2">抽卡*10</div>
</div>
<div class="all_Result"></div>
<div class="tips">当前功能为测试版</div>
</div>
</div>
</div>
<div class="btns_area">
<div class="btn_start" id="btn_start_1">抽卡</div>
<div class="btn_start" id="btn_start_2">抽卡*10</div>
</div>
<div class="all_Result"></div>
<div class="tips">当前功能为测试版</div>
</div>


{{#css:
{{#css:
.ck_main_area * {
 
margin: 0;
.ck_main_area * {
padding: 0;
margin: 0;
}
padding: 0;
.ck_main_area {
}
width: 100%;
 
max-width: 600px;
.ck_main_area {
min-width: 300px;
width: 100%;
/* border: 4px solid #000000; */
margin: auto;
margin: 0;
padding: 0;
padding: 0;
color: #000000;
color: #000000;
max-width: 800px;
/* box-sizing: border-box; */
min-width: 450px;
}
 
.ck_main_area * {
/* box-sizing: border-box; */
box-sizing: border-box;
}
}
 
.ck_main_area .window_area {
.ck_main_area * {
width: 100%;
box-sizing: border-box;
aspect-ratio: 800/ 500;
}
border: 4px solid #FFFFFF;
 
background-color: #000000;
.ck_main_area .window_area {
position: relative;
width: 100%;
}
aspect-ratio: 800/ 500;
.ck_main_area .window_area .img_ring {
border: 4px solid #FFFFFF;
width: 100%;
background-color: #000000;
height: 100%;
position: relative;
position: absolute;
}
left: 0;
 
top: 0;
.ck_main_area .window_area .img_ring {
display: none;
width: 100%;
}
height: 100%;
.ck_main_area .window_area .img_ring.ring {
position: absolute;
animation: ring_in;
left: 0;
animation-duration: 3s;
top: 0;
/* animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); */
display: none;
animation-timing-function: linear;
}
animation-fill-mode: forwards;
 
position: absolute;
.ck_main_area .window_area .img_ring.ring {
left: 0;
animation: ring_in;
top: 65px;
animation-duration: 3s;
display: none;
/* animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); */
}
animation-timing-function: linear;
.ck_main_area .window_area .img_ring img{
animation-fill-mode: forwards;
width:100%;
position: absolute;
height:auto;
left: 0;
}
top: 65px;
.ck_main_area .window_area .result_area {
display: none;
width: 100%;
}
height: 100%;
 
padding: 0 20px 20px 20px;
.ck_main_area .window_area .img_ring img {
background-color: #FFFFFF;
width: 100%;
height: auto;
background-size: 100% 100%;
}
background-repeat: no-repeat;
 
/* position: absolute;
.ck_main_area .window_area .result_area {
width: 100%;
height: 100%;
padding: 0 20px 20px 20px;
background-color: #FFFFFF;
 
background-size: 100% 100%;
background-repeat: no-repeat;
/* position: absolute;
left: 0;
left: 0;
top: 0%;
top: 0%;
padding: 4px; */
padding: 4px; */
/* opacity: 0; */
/* opacity: 0; */
animation: window_white;
animation: window_white;
animation-duration: 2s;
animation-duration: 2s;
animation-timing-function: linear;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-fill-mode: forwards;
display: none;
display: none;
flex-direction: row;
flex-direction: row;
align-items: center;
align-items: center;
flex-wrap: wrap;
flex-wrap: wrap;
justify-content: center;
justify-content: center;
overflow-y: auto;
overflow-y: auto;
}
}
.ck_main_area .window_area .result_area .role_area {
 
width: 18%;
.ck_main_area .window_area .result_area .role_area {
height: auto;
width: 18%;
padding-top: 10px;
height: auto;
margin: 2px;
padding-top: 10px;
text-align: center;
margin: 2px;
font-size: 12px;
text-align: center;
line-height: 20px;
font-size: 12px;
position: relative;
line-height: 20px;
}
position: relative;
.ck_main_area .window_area .result_area .role_area .text {
}
text-align: left;
 
margin-left: 10px;
.ck_main_area .window_area .result_area .role_area .text {
white-space: no-wrap;
text-align: left;
}
margin-left: 10px;
.ck_main_area .window_area .result_area .role_area .img {
white-space: no-wrap;
width: 100%;
}
aspect-ratio: 1;
 
height: auto;
.ck_main_area .window_area .result_area .role_area .img {
}
width: 100%;
.ck_main_area .window_area .result_area .role_area .img_xs {
aspect-ratio: 1;
position: absolute;
height: auto;
right: 0;
}
bottom: 0;
 
width: 50%;
.ck_main_area .window_area .result_area .role_area .img_xs {
height: auto;
position: absolute;
}
right: 0;
bottom: 0;
.ck_main_area .btns_area {
width: 50%;
display: flex;
height: auto;
flex-direction: row;
}
justify-content: space-around;
 
}
.ck_main_area .btns_area {
.ck_main_area .btns_area .btn_start {
display: flex;
cursor: pointer;
flex-direction: row;
width: 120px;
justify-content: space-around;
text-align: center;
}
padding: 4px 0;
 
margin-bottom: 10px;
.ck_main_area .btns_area .btn_start {
border: 4px solid #000000;
cursor: pointer;
}
width: 120px;
.ck_main_area .all_Result {
text-align: center;
width: 100%;
padding: 4px 0;
font-size: 12px;
margin-bottom: 10px;
text-align: center;
border: 4px solid #000000;
height: 54px;
}
}
 
.ck_main_area .tips {
.ck_main_area .all_Result {
color: gray;
width: 100%;
font-size: 12px;
font-size: 12px;
text-align: center;
text-align: center;
}
height: 54px;
}
@keyframes ring_in {
 
0% { left: 0px; scale: 0;}
.ck_main_area .tips {
100% { left: 140px; scale: 1;}
color: gray;
}
font-size: 12px;
@keyframes window_white {
text-align: center;
0% { opacity: 0; }
}
100% { opacity: 1;}
 
}
@keyframes ring_in {
0% {
left: 0px;
scale: 0;
}
 
100% {
left: 140px;
scale: 1;
}
}
 
@keyframes window_white {
0% {
opacity: 0;
}


100% {
opacity: 1;
}
}
}}
}}


{{ResourceLoader|MediaWiki:Dbck.js|isModuleES6=true}}
{{ResourceLoader|MediaWiki:Dbck.js|isModuleES6=true}}
{{ResourceLoader|MediaWiki:Db_role_data.js|isModuleES6=true}}
{{ResourceLoader|MediaWiki:Db_role_data.js|isModuleES6=true}}

2024年9月5日 (四) 12:35的版本

db ck ring0.jpg
db ck ring1.jpg
db ck ring2.jpg
抽卡
抽卡*10
当前功能为测试版




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