MCBBS Wiki欢迎您共同参与编辑!在参与编辑之前请先阅读Wiki方针。
如果在编辑的过程中遇到了什么问题,可以去讨论板提问。
为了您能够无阻碍地参与编辑 未验证/绑定过邮箱的用户,请尽快绑定/验证。
MCBBS Wiki GitHub群组已上线!
您可以在回声洞中发表吐槽!
服务器状态监控。点击进入
本站由MCBBS用户自行搭建,与MCBBS及东银河系漫游指南(北京)科技有限公司没有从属关系。点此了解 MCBBS Wiki 不是什么>>
模板:动态显示:修订间差异
Salt lovely(留言 | 贡献) (动态显示模板搬运) |
Salt lovely(留言 | 贡献) (添加时间参数 // 维基盐编辑器) |
||
第3行: | 第3行: | ||
技术细节:当num为1时,不适用“动态显示/CSS”模板,而转用一般css |
技术细节:当num为1时,不适用“动态显示/CSS”模板,而转用一般css |
||
-->{{#ifeq:{{#expr:{{#var:num}} > 1}}|1 |
-->{{#ifeq:{{#expr:{{#var:num}} > 1}}|1 |
||
|{{#css: {{动态显示/CSS| {{#var:num}} }} }} |
|{{#css: {{动态显示/CSS| {{#var:num}} | {{{时间|1000}}} }} }} |
||
|{{#css: .animated.animated-1>.animated-item{opacity:1} }} |
|{{#css: .animated.animated-1>.animated-item{opacity:1} }} |
||
}}</includeonly><noinclude>{{doc}}[[分类:辅助模板]]</noinclude> |
}}</includeonly><noinclude>{{doc}}[[分类:辅助模板]]</noinclude> |
2022年8月18日 (四) 22:04的版本
用法
{{动态显示|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}}
@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;} }}
@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;} }}
@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>.animated-item{opacity:1} }}