抽卡模拟器开发版：修订间差异
更新日期： 2024-12-10 最新编辑：木丶阿伦
无编辑摘要 |
无编辑摘要 |
||
| （未显示同一用户的4个中间版本） | |||
| 第1行： | 第1行： | ||
<div class="ck_main_area"> | <div class="ck_main_area"> | ||
<div class="title" id="pool_title"></div> | <div class="title" id="pool_title"></div> | ||
<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_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="result_area"> | |||
</div> | |||
</div> | |||
<div class="btns_area"> | |||
<div class="btn_start" id="btn_start_1">抽卡</div> | |||
<div class="btn_start" id="btn_start_10">抽卡*10</div> | |||
</div> | |||
<div class="all_Result"></div> | |||
<div class="tips"><div class="tips">当前功能为测试版</div><div class="tips">实际抽卡概率请以游戏内为准</div></div> | |||
<div class="">切换至其他卡池</div> | |||
<div class="change_pool"></div> | |||
</div> | </div> | ||
{{#css: | {{#css: | ||
.ck_main_area * { | |||
margin: 0; | |||
padding: 0; | |||
color: #000000; | |||
} | |||
.ck_main_area { | |||
width: 100%; | |||
margin: auto; | |||
padding: 0; | |||
color: #000000; | |||
max-width: 800px; | |||
min-width: 350px; | |||
min-height: 220px; | |||
} | |||
.ck_main_area .title{ | |||
text-align: center; | |||
} | |||
.ck_main_area .change_pool{ | |||
cursor:pointer; | |||
text-decoration: underline; | |||
} | |||
.ck_main_area * { | |||
box-sizing: border-box; | |||
} | |||
.ck_main_area .window_area { | |||
width: 100%; | |||
aspect-ratio: 800/ 500; | |||
background-color: #000000; | |||
position: relative; | |||
} | |||
.ck_main_area .window_area .img_ring { | |||
width: 100%; | |||
height: 100%; | |||
position: absolute; | |||
left: 0; | |||
top: 0; | |||
display: none; | |||
} | |||
.ck_main_area .window_area .img_ring.ring { | |||
animation: ring_in; | |||
animation-duration: 3s; | |||
/* animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); */ | |||
animation-timing-function: linear; | |||
animation-fill-mode: forwards; | |||
position: absolute; | |||
left: 0; | |||
top: 65px; | |||
display: none; | |||
} | |||
.ck_main_area .window_area .img_ring img { | |||
width: 100%; | |||
aspect-ratio: 800 / 500; | |||
} | |||
.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; | |||
animation: window_white; | |||
animation-duration: 2s; | |||
animation-timing-function: linear; | |||
animation-fill-mode: forwards; | |||
display: none; | |||
flex-direction: row; | |||
align-items: center; | |||
flex-wrap: wrap; | |||
justify-content: center; | |||
overflow: hidden; | |||
} | |||
.ck_main_area .window_area .result_area .role_area { | |||
width: 18%; | |||
aspect-ratio: 130 / 190; | |||
padding-top: 10px; | |||
margin: 2px; | |||
text-align: center; | |||
font-size: 12px; | |||
line-height: 20px; | |||
position: relative; | |||
} | |||
.ck_main_area .window_area .result_area .role_area .text { | |||
text-align: left; | |||
margin-left: 10px; | |||
white-space: nowrap; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
line-height: 16px; | |||
} | |||
.ck_main_area .window_area .result_area .role_area .img { | |||
width: 100%; | |||
aspect-ratio: 1; | |||
} | |||
.ck_main_area .window_area .result_area .role_area .img_xs { | |||
position: absolute; | |||
right: 0; | |||
bottom: 0; | |||
width: 50%; | |||
height: auto; | |||
} | |||
.ck_main_area .btns_area { | |||
display: flex; | |||
flex-direction: row; | |||
justify-content: space-around; | |||
} | |||
.ck_main_area .btns_area .btn_start { | |||
cursor: pointer; | |||
width: 120px; | |||
text-align: center; | |||
padding: 4px 0; | |||
margin-bottom: 10px; | |||
margin-top: 10px; | |||
border: 4px solid #000000; | |||
} | |||
.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) { | @media screen and (max-width: 600px) { | ||
.ck_main_area .window_area .result_area .role_area .text { | .ck_main_area .window_area .result_area .role_area .text { | ||
font-size: 8px !important; | font-size: 8px !important; | ||
margin-left:0; | margin-left:0; | ||
} | } | ||
} | } | ||
}} | }} | ||
{{ResourceLoader|MediaWiki:Db_role_data.js|isModuleES6=true}} | {{ResourceLoader|MediaWiki:Db_role_data.js|isModuleES6=true}} | ||
{{ResourceLoader|MediaWiki:Ck_main_dev.js|isModuleES6=true}} | {{ResourceLoader|MediaWiki:Ck_main_dev.js|isModuleES6=true}} | ||
2024年12月10日 (二) 20:39的最新版本
抽卡
抽卡*10
当前功能为测试版
实际抽卡概率请以游戏内为准
切换至其他卡池