MCBBS Wiki欢迎您共同参与编辑！在参与编辑之前请先阅读Wiki方针。

如果在编辑的过程中遇到了什么问题，可以去讨论板提问。

为了您能够无阻碍地参与编辑 未验证/绑定过邮箱的用户，请尽快绑定/验证。

MCBBS Wiki GitHub群组已上线！

您可以在回声洞中发表吐槽！

服务器状态监控。点击进入

本站由MCBBS用户自行搭建，与MCBBS及东银河系漫游指南（北京）科技有限公司没有从属关系。点此了解 MCBBS Wiki 不是什么>>

模板:动态显示：修订间差异

来自MCBBS Wiki
跳到导航 跳到搜索
可视化wikitext
（添加时间参数 // 维基盐编辑器）
小 （自定义时间间隔功能补全）
第1行： 第1行：
<includeonly>{{#vardefine:a|{{#fornumargs: num | value|<span class="animated-item">{{#var:value}}</span>}}}}<!--
<includeonly>{{#vardefine:a|{{#fornumargs: num | value|<span class="animated-item">{{#var:value}}</span>}}}}<!--
-->{{动态显示/HTML|1={{#var:a}}|2={{#var:num}}|宽={{{宽|auto}}}|高={{{高|auto}}}|style={{{style|display:inline-block;}}}}}<!--
-->{{动态显示/HTML|1={{#var:a}}|2={{#var:num}}|宽={{{宽|auto}}}|高={{{高|auto}}}|style={{{style|display:inline-block;}}}|时间={{{时间|1000}}}}}<!--
技术细节：当num为1时，不适用“动态显示/CSS”模板，而转用一般css
技术细节：当num为1时，不适用“动态显示/CSS”模板，而转用一般css
-->{{#ifeq:{{#expr:{{#var:num}} > 1}}|1
-->{{#ifeq:{{#expr:{{#var:num}} > 1}}|1
|{{#css: {{动态显示/CSS| {{#var:num}} | {{{时间|1000}}} }} }}
|{{#css: {{动态显示/CSS| {{#var:num}} | {{{时间|1000}}} }} }}
|{{#css: .animated.animated-1>.animated-item{opacity:1} }}
|{{#css: .animated.animated-1-{{{时间|1000}}} > .animated-item{opacity:1} }}
}}</includeonly><noinclude>{{doc}}[[分类:辅助模板]]</noinclude>
}}</includeonly><noinclude>{{doc}}[[分类:辅助模板]]</noinclude>

2022年8月19日 (五) 20:52的版本

模板文档  [查看] [编辑] [历史] [刷新]
这个文档嵌入自模板:动态显示/doc。
本条目有待完善，当前内容并不完整。 原因在于：
  • 缺少图片演示
MCBBS Wiki欢迎您帮助我们完善条目。

用法

{{动态显示|A|B|C|D}}
{{动态显示|高=|宽=|A|B|C|D}}
  • 动态显示（轮播）内容，参数可以输入文字、图片或别的什么。
  • 高和宽默认为自动（auto）。

示例

{{动态显示|时间=500|ooooo|0oooo|o0ooo|oo0oo|ooo0o|oooo0}}
{{动态显示|ooooo|0oooo|o0ooo|oo0oo|ooo0o|oooo0}}
{{动态显示|时间=2000|ooooo|0oooo|o0ooo|oo0oo|ooo0o|oooo0}}
ooooo0ooooo0ooooo0ooooo0ooooo0{{#css:

@keyframes salt-carousel-animated-6-500 { 0% { opacity: 1; z-index: 20; } 16.666666666667% { opacity: 1; z-index: 20; } 16.666766666667% { opacity: 0; z-index: 10; } 100% { opacity: 0; z-index: 10; } } .animated { 

 position: relative;

} .animated>.animated-item { 

 position: absolute;
 opacity: 0;
 z-index: 24;

} .animated-6-500>.animated-item:nth-child(1){ 

 animation: salt-carousel-animated-6-500 3000ms 0ms infinite;
 -webkit-animation: salt-carousel-animated-6-500 3000ms 0ms infinite;

}.animated-6-500>.animated-item:nth-child(2){ 

 animation: salt-carousel-animated-6-500 3000ms 500ms infinite;
 -webkit-animation: salt-carousel-animated-6-500 3000ms 500ms infinite;

}.animated-6-500>.animated-item:nth-child(3){ 

 animation: salt-carousel-animated-6-500 3000ms 1000ms infinite;
 -webkit-animation: salt-carousel-animated-6-500 3000ms 1000ms infinite;

}.animated-6-500>.animated-item:nth-child(4){ 

 animation: salt-carousel-animated-6-500 3000ms 1500ms infinite;
 -webkit-animation: salt-carousel-animated-6-500 3000ms 1500ms infinite;

}.animated-6-500>.animated-item:nth-child(5){ 

 animation: salt-carousel-animated-6-500 3000ms 2000ms infinite;
 -webkit-animation: salt-carousel-animated-6-500 3000ms 2000ms infinite;

}.animated-6-500>.animated-item:nth-child(6){ 

 animation: salt-carousel-animated-6-500 3000ms 2500ms infinite;
 -webkit-animation: salt-carousel-animated-6-500 3000ms 2500ms infinite;
} }}
ooooo0ooooo0ooooo0ooooo0ooooo0{{#css:

@keyframes salt-carousel-animated-6-1000 { 0% { opacity: 1; z-index: 20; } 16.666666666667% { opacity: 1; z-index: 20; } 16.666766666667% { opacity: 0; z-index: 10; } 100% { opacity: 0; z-index: 10; } } .animated { 

 position: relative;

} .animated>.animated-item { 

 position: absolute;
 opacity: 0;
 z-index: 24;

} .animated-6-1000>.animated-item:nth-child(1){ 

 animation: salt-carousel-animated-6-1000 6000ms 0ms infinite;
 -webkit-animation: salt-carousel-animated-6-1000 6000ms 0ms infinite;

}.animated-6-1000>.animated-item:nth-child(2){ 

 animation: salt-carousel-animated-6-1000 6000ms 1000ms infinite;
 -webkit-animation: salt-carousel-animated-6-1000 6000ms 1000ms infinite;

}.animated-6-1000>.animated-item:nth-child(3){ 

 animation: salt-carousel-animated-6-1000 6000ms 2000ms infinite;
 -webkit-animation: salt-carousel-animated-6-1000 6000ms 2000ms infinite;

}.animated-6-1000>.animated-item:nth-child(4){ 

 animation: salt-carousel-animated-6-1000 6000ms 3000ms infinite;
 -webkit-animation: salt-carousel-animated-6-1000 6000ms 3000ms infinite;

}.animated-6-1000>.animated-item:nth-child(5){ 

 animation: salt-carousel-animated-6-1000 6000ms 4000ms infinite;
 -webkit-animation: salt-carousel-animated-6-1000 6000ms 4000ms infinite;

}.animated-6-1000>.animated-item:nth-child(6){ 

 animation: salt-carousel-animated-6-1000 6000ms 5000ms infinite;
 -webkit-animation: salt-carousel-animated-6-1000 6000ms 5000ms infinite;
} }}
ooooo0ooooo0ooooo0ooooo0ooooo0{{#css:

@keyframes salt-carousel-animated-6-2000 { 0% { opacity: 1; z-index: 20; } 16.666666666667% { opacity: 1; z-index: 20; } 16.666766666667% { opacity: 0; z-index: 10; } 100% { opacity: 0; z-index: 10; } } .animated { 

 position: relative;

} .animated>.animated-item { 

 position: absolute;
 opacity: 0;
 z-index: 24;

} .animated-6-2000>.animated-item:nth-child(1){ 

 animation: salt-carousel-animated-6-2000 12000ms 0ms infinite;
 -webkit-animation: salt-carousel-animated-6-2000 12000ms 0ms infinite;

}.animated-6-2000>.animated-item:nth-child(2){ 

 animation: salt-carousel-animated-6-2000 12000ms 2000ms infinite;
 -webkit-animation: salt-carousel-animated-6-2000 12000ms 2000ms infinite;

}.animated-6-2000>.animated-item:nth-child(3){ 

 animation: salt-carousel-animated-6-2000 12000ms 4000ms infinite;
 -webkit-animation: salt-carousel-animated-6-2000 12000ms 4000ms infinite;

}.animated-6-2000>.animated-item:nth-child(4){ 

 animation: salt-carousel-animated-6-2000 12000ms 6000ms infinite;
 -webkit-animation: salt-carousel-animated-6-2000 12000ms 6000ms infinite;

}.animated-6-2000>.animated-item:nth-child(5){ 

 animation: salt-carousel-animated-6-2000 12000ms 8000ms infinite;
 -webkit-animation: salt-carousel-animated-6-2000 12000ms 8000ms infinite;

}.animated-6-2000>.animated-item:nth-child(6){ 

 animation: salt-carousel-animated-6-2000 12000ms 10000ms infinite;
 -webkit-animation: salt-carousel-animated-6-2000 12000ms 10000ms infinite;
} }}
{{动态显示|高=32px|宽=32px|[[文件:原版-Command Block.png|32px]]|[[文件:原版-Clock.png|32px]]}}

{{#css: @keyframes salt-carousel-animated-2-1000 { 0% { opacity: 1; z-index: 20; } 50% { opacity: 1; z-index: 20; } 50.0001% { opacity: 0; z-index: 10; } 100% { opacity: 0; z-index: 10; } } .animated { 

 position: relative;

} .animated>.animated-item { 

 position: absolute;
 opacity: 0;
 z-index: 24;

} .animated-2-1000>.animated-item:nth-child(1){ 

 animation: salt-carousel-animated-2-1000 2000ms 0ms infinite;
 -webkit-animation: salt-carousel-animated-2-1000 2000ms 0ms infinite;

}.animated-2-1000>.animated-item:nth-child(2){ 

 animation: salt-carousel-animated-2-1000 2000ms 1000ms infinite;
 -webkit-animation: salt-carousel-animated-2-1000 2000ms 1000ms infinite;

} }} 

{{动态显示|宽=20em|高=1em|如果只有一个参数，则没有动画效果。}}

如果只有一个参数，则没有动画效果。{{#css: .animated.animated-1-1000 > .animated-item{opacity:1} }}

取自“https://mcbbs.wiki/index.php?title=模板:动态显示&oldid=37682”