MCBBS Wiki欢迎您共同参与编辑！在参与编辑之前请先阅读Wiki方针。
如果在编辑的过程中遇到了什么问题，可以去讨论板提问。
为了您能够无阻碍地参与编辑 未验证/绑定过邮箱的用户，请尽快绑定/验证。
MCBBS Wiki GitHub群组已上线！
您可以在回声洞中发表吐槽！
服务器状态监控。点击进入
本站由MCBBS用户自行搭建，与MCBBS及东银河系漫游指南（北京）科技有限公司没有从属关系。点此了解 MCBBS Wiki 不是什么>>
模板:动态显示/CSS：修订间差异
< 模板:动态显示
Salt lovely（留言 | 贡献） 小 （修复一个笔误；动画名更改，以防冲突） |
Salt lovely（留言 | 贡献） 小 （自定义时间间隔功能补全） |
||
| （未显示同一用户的1个中间版本） | |||
| 第1行： | 第1行： | ||
<includeonly>{{#vardefine:num|{{{1|3}}}}}{{#vardefine:time|{{{2|1000}}}}}{{#vardefine:showtime|{{#expr:100 / {{#var:num}}}}}} | <includeonly>{{#vardefine:num|{{{1|3}}}}}{{#vardefine:time|{{{2|1000}}}}}{{#vardefine:showtime|{{#expr:100 / {{#var:num}}}}}}{{#vardefine:animeName|{{{3|salt-carousel}}}-animated-{{#var:num}}-{{#var:time}}}} | ||
@keyframes {{#var:animeName}} | |||
{ | { | ||
0% { opacity: 1; z-index: 20; } | 0% { opacity: 1; z-index: 20; } | ||
| 第16行： | 第16行： | ||
} | } | ||
{{#loop:count|1|{{#var:num}}| | {{#loop:count|1|{{#var:num}}| | ||
.animated-{{#var:num}}>.animated-item:nth-child({{#var:count}}){ | .animated-{{#var:num}}-{{#var:time}}>.animated-item:nth-child({{#var:count}}){ | ||
animation: | animation: {{#var:animeName}} {{#expr:{{#var:num}} * {{#var:time}}}}ms {{#expr:{{#var:time}} * ( {{#var:count}} - 1 )}}ms infinite; | ||
-webkit-animation: | -webkit-animation: {{#var:animeName}} {{#expr:{{#var:num}} * {{#var:time}}}}ms {{#expr:{{#var:time}} * ( {{#var:count}} - 1 )}}ms infinite; | ||
} | } | ||
}}</includeonly><noinclude>{{doc}}[[分类:模板功能性子页面]]</noinclude> | }}</includeonly><noinclude>{{doc}}[[分类:模板功能性子页面]]</noinclude> | ||
2022年8月19日 (五) 20:48的最新版本
用法
{{动态显示/CSS| 数量 | 每个元素显示的时间 }}
- 数量必填。
- 每个元素显示的时间选填，默认为1000（单位毫秒）。
示例
<span class="animated animated-6-1000" style="height:auto;width:auto;display:inline-block;">
<span class="animated-item">ooooo</span>
<span class="animated-item">0oooo</span>
<span class="animated-item">o0ooo</span>
<span class="animated-item">oo0oo</span>
<span class="animated-item">ooo0o</span>
<span class="animated-item">oooo0</span>
</span>
{{CSS|1= {{动态显示/CSS| 6 }} }}
ooooo 0oooo o0ooo oo0oo ooo0o oooo0
<span class="animated animated-6-500" style="height:auto;width:auto;display:inline-block;">
<span class="animated-item">ooooo</span>
<span class="animated-item">0oooo</span>
<span class="animated-item">o0ooo</span>
<span class="animated-item">oo0oo</span>
<span class="animated-item">ooo0o</span>
<span class="animated-item">oooo0</span>
</span>
{{CSS|1= {{动态显示/CSS| 6 | 500 }} }}
ooooo 0oooo o0ooo oo0oo ooo0o oooo0