模板:星痕配队攻略

使用方法

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

基本调用代码

{{星痕配队攻略|模板开始|主体样式= }}
{{星痕配队攻略|开始组队|tab样式= }}
{{星痕配队攻略|首队编号|编号= |编队名称= |标签样式= }}
{{星痕配队攻略|结束组队}}
{{星痕配队攻略|次队编号|编号= |编队名称= }}
{{星痕配队攻略|结束组队}}
{{星痕配队攻略|首队内容开始|编号= }}
{{星痕配队攻略|推荐星痕|星痕名称= （多个成员间以符号#分隔）}}
{{星痕配队攻略|队伍内容结束}}
{{星痕配队攻略|次队内容开始|编号= }}
{{星痕配队攻略|推荐星痕|星痕名称= （多个成员间以符号#分隔）}}
{{星痕配队攻略|队伍内容结束}}
{{星痕配队攻略|模板结束}}

切换标签面板在上方

{{星痕配队攻略|模板开始}}
{{星痕配队攻略|开始组队}}
{{星痕配队攻略|首队编号|编号=1|队伍名称=队伍1}}
{{星痕配队攻略|次队编号|编号=2|队伍名称=队伍2}}
{{星痕配队攻略|次队编号|编号=3|队伍名称=队伍3}}
{{星痕配队攻略|结束组队}}
{{星痕配队攻略|首队内容开始|编号=1}}
{{星痕配队攻略|推荐星痕|星痕名称=昔莱#丹妮#桃}}
队伍1需要显示的内容。
{{星痕配队攻略|队伍内容结束}}
{{星痕配队攻略|次队内容开始|编号=2}}
队伍2需要显示的内容。
{{星痕配队攻略|队伍内容结束}}
{{星痕配队攻略|次队内容开始|编号=3}}
队伍3需要显示的内容。
{{星痕配队攻略|队伍内容结束}}
{{星痕配队攻略|模板结束}}

• 队伍1
• 队伍2
• 队伍3

推荐星痕
昔莱 丹妮 桃

队伍1需要显示的内容。

队伍2需要显示的内容。

队伍3需要显示的内容。

切换标签面板在上方并居中

{{星痕配队攻略|模板开始}}
{{星痕配队攻略|开始组队|tab样式=display: flex; justify-content: center;}}
{{星痕配队攻略|首队编号|编号=7|队伍名称=队伍1}}
{{星痕配队攻略|次队编号|编号=8|队伍名称=队伍2}}
{{星痕配队攻略|次队编号|编号=9|队伍名称=队伍3}}
{{星痕配队攻略|结束组队}}
{{星痕配队攻略|首队内容开始|编号=7}}
{{星痕配队攻略|推荐星痕|星痕名称=昔莱#丹妮#桃}}
队伍1需要显示的内容。
{{星痕配队攻略|队伍内容结束}}
{{星痕配队攻略|次队内容开始|编号=8}}
队伍2需要显示的内容。
{{星痕配队攻略|队伍内容结束}}
{{星痕配队攻略|次队内容开始|编号=9}}
队伍3需要显示的内容。
{{星痕配队攻略|队伍内容结束}}
{{星痕配队攻略|模板结束}}

• 队伍1
• 队伍2
• 队伍3

推荐星痕
昔莱 丹妮 桃

队伍1需要显示的内容。

队伍2需要显示的内容。

队伍3需要显示的内容。

切换标签面板在下方

{{星痕配队攻略|模板开始|主体样式=position: relative; height: 650px; overflow: hidden;}}
{{星痕配队攻略|首队内容开始|编号=4}}
{{星痕配队攻略|推荐星痕|星痕名称=昔莱#丹妮#桃}}
队伍1需要显示的内容。[[文件:桃立绘.png]]
{{星痕配队攻略|队伍内容结束}}
{{星痕配队攻略|次队内容开始|编号=5}}
队伍2需要显示的内容。
{{星痕配队攻略|队伍内容结束}}
{{星痕配队攻略|次队内容开始|编号=6}}
队伍3需要显示的内容。
{{星痕配队攻略|队伍内容结束}}
{{星痕配队攻略|开始组队|tab样式=position: absolute; bottom: 0;left: 0;}}
{{星痕配队攻略|首队编号|编号=4|队伍名称=队伍1}}
{{星痕配队攻略|次队编号|编号=5|队伍名称=队伍2}}
{{星痕配队攻略|次队编号|编号=6|队伍名称=队伍3}}
{{星痕配队攻略|结束组队}}
{{星痕配队攻略|模板结束}}

推荐星痕
昔莱 丹妮 桃

队伍1需要显示的内容。

队伍2需要显示的内容。

队伍3需要显示的内容。

• 队伍1
• 队伍2
• 队伍3

标签在下方居中

{{星痕配队攻略|模板开始|主体样式=position: relative; height: 650px; overflow: hidden;}}
{{星痕配队攻略|首队内容开始|编号=10}}
{{星痕配队攻略|推荐星痕|星痕名称=昔莱#丹妮#桃}}
队伍1需要显示的内容。[[文件:桃立绘.png]]
{{星痕配队攻略|队伍内容结束}}
{{星痕配队攻略|次队内容开始|编号=11}}
队伍2需要显示的内容。
{{星痕配队攻略|队伍内容结束}}
{{星痕配队攻略|次队内容开始|编号=12}}
队伍3需要显示的内容。
{{星痕配队攻略|队伍内容结束}}
{{星痕配队攻略|开始组队|tab样式=position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}}
{{星痕配队攻略|首队编号|编号=10|队伍名称=队伍1}}
{{星痕配队攻略|次队编号|编号=11|队伍名称=队伍2}}
{{星痕配队攻略|次队编号|编号=12|队伍名称=队伍3}}
{{星痕配队攻略|结束组队}}
{{星痕配队攻略|模板结束}}

推荐星痕
昔莱 丹妮 桃

队伍1需要显示的内容。

队伍2需要显示的内容。

队伍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 */  
}
}}