一切的故事,就由你来书写吧,总队长。
交错战线WIKI攻略组,NERI调查组诚招有志的你与我们一起书写百科全书
点击此处加入我们

全站通知:

模板:切换标签3

来自交错战线WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索
本模板转载自千年之律wiki

使用方法

队伍编号要对应,一个页面只能存在一个相同的序号。

基本调用代码

{{切换标签3|模板开始|主体样式= }}
{{切换标签3|开始组队|tab样式= }}
{{切换标签3|首队编号|编号= |body样式= |标签样式= |编队名称= }}
{{切换标签3|结束组队}}
{{切换标签3|次队编号|编号= |标签样式= |编队名称= }}
{{切换标签3|结束组队}}
{{切换标签3|首队内容开始|编号= |标签样式= }}
{{切换标签3|队伍内容结束}}
{{切换标签3|次队内容开始|编号= |标签样式= }}
{{切换标签3|队伍内容结束}}
{{切换标签3|模板结束}}

切换标签3在上方

{{切换标签3|模板开始|主体样式=background-color: rgba(0, 0, 0, 0.4);}}
{{切换标签3|开始组队}}
{{切换标签3|首队编号|编号=1|队伍名称=队伍1}}
{{切换标签3|次队编号|编号=2|队伍名称=队伍2}}
{{切换标签3|次队编号|编号=3|队伍名称=队伍3}}
{{切换标签3|结束组队}}
{{切换标签3|首队内容开始|编号=1}}
队伍1需要显示的内容。
{{切换标签3|队伍内容结束}}
{{切换标签3|次队内容开始|编号=2}}
队伍2需要显示的内容。
{{切换标签3|队伍内容结束}}
{{切换标签3|次队内容开始|编号=3}}
队伍3需要显示的内容。
{{切换标签3|队伍内容结束}}
{{切换标签3|模板结束}}

队伍1需要显示的内容。

队伍2需要显示的内容。

队伍3需要显示的内容。

切换标签3在上方并居中

{{切换标签3|模板开始|主体样式=background-color: rgba(0, 0, 0, 0.4);}}
{{切换标签3|开始组队|tab样式=display: flex; justify-content: center;}}
{{切换标签3|首队编号|编号=7|队伍名称=队伍1}}
{{切换标签3|次队编号|编号=8|队伍名称=队伍2}}
{{切换标签3|次队编号|编号=9|队伍名称=队伍3}}
{{切换标签3|结束组队}}
{{切换标签3|首队内容开始|编号=7}}
队伍1需要显示的内容。
{{切换标签3|队伍内容结束}}
{{切换标签3|次队内容开始|编号=8}}
队伍2需要显示的内容。
{{切换标签3|队伍内容结束}}
{{切换标签3|次队内容开始|编号=9}}
队伍3需要显示的内容。
{{切换标签3|队伍内容结束}}
{{切换标签3|模板结束}}

队伍1需要显示的内容。

队伍2需要显示的内容。

队伍3需要显示的内容。

切换标签3在下方

{{切换标签3|模板开始|主体样式=background-color: rgba(0, 0, 0, 0.4);position: relative; height: 650px; overflow: hidden;}}
{{切换标签3|首队内容开始|编号=4}}
队伍1需要显示的内容。
{{切换标签3|队伍内容结束}}
{{切换标签3|次队内容开始|编号=5}}
队伍2需要显示的内容。
{{切换标签3|队伍内容结束}}
{{切换标签3|次队内容开始|编号=6}}
队伍3需要显示的内容。
{{切换标签3|队伍内容结束}}
{{切换标签3|开始组队|tab样式=position: absolute; bottom: 0;left: 0;}}
{{切换标签3|首队编号|编号=4|队伍名称=队伍1}}
{{切换标签3|次队编号|编号=5|队伍名称=队伍2}}
{{切换标签3|次队编号|编号=6|队伍名称=队伍3}}
{{切换标签3|结束组队}}
{{切换标签3|模板结束}}

队伍1需要显示的内容。

队伍2需要显示的内容。

队伍3需要显示的内容。

标签在下方居中

{{切换标签3|模板开始|主体样式=background-color: rgba(0, 0, 0, 0.4);position: relative; height: 650px; overflow: hidden;}}
{{切换标签3|首队内容开始|编号=10}}
队伍1需要显示的内容。
{{切换标签3|队伍内容结束}}
{{切换标签3|次队内容开始|编号=11}}
队伍2需要显示的内容。
{{切换标签3|队伍内容结束}}
{{切换标签3|次队内容开始|编号=12}}
队伍3需要显示的内容。
{{切换标签3|队伍内容结束}}
{{切换标签3|开始组队|tab样式=position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}}
{{切换标签3|首队编号|编号=10|队伍名称=队伍1}}
{{切换标签3|次队编号|编号=11|队伍名称=队伍2}}
{{切换标签3|次队编号|编号=12|队伍名称=队伍3}}
{{切换标签3|结束组队}}
{{切换标签3|模板结束}}

队伍1需要显示的内容。

队伍2需要显示的内容。

队伍3需要显示的内容。

渐入渐出效果

使用CSS添加渐入渐出效果,一个页面仅需设置一次即可:

{{#CSS:
.tab-pane {  
    opacity: 0; /* 默认透明度为0 */  
    transition: opacity 1s ease-in-out; /* 添加过渡效果 */  
}  
  
.tab-pane.active {  
    opacity: 1; /* 活动状态时透明度为1 */  
    animation: fadeIn 1s ease-in-out; /* 添加关键帧动画 */  
}  
  
@keyframes fadeIn { /* 定义关键帧动画 */  
    0% { opacity: 0; } /* 从透明度0开始 */  
    100% { opacity: 1; } /* 变为透明度1 */  
}
}}