MCBBS Wiki欢迎您共同参与编辑！在参与编辑之前请先阅读Wiki方针。
如果在编辑的过程中遇到了什么问题，可以去讨论板提问。
为了您能够无阻碍地参与编辑 未验证/绑定过邮箱的用户，请尽快绑定/验证。
MCBBS Wiki GitHub群组已上线！
您可以在回声洞中发表吐槽！
服务器状态监控。点击进入
本站由MCBBS用户自行搭建，与MCBBS及东银河系漫游指南（北京）科技有限公司没有从属关系。点此了解 MCBBS Wiki 不是什么>>
模板:动态显示/CSS/doc：修订间差异
Salt lovely（留言 | 贡献） （.） |
Salt lovely（留言 | 贡献） 小 （→示例） |
||
| 第9行： | 第9行： | ||
== 示例 == |
== 示例 == |
||
<pre> |
<pre> |
||
<span class="animated animated-6" style="height:auto;width:auto;display:inline-block;"> |
<span class="animated animated-6-1000" style="height:auto;width:auto;display:inline-block;"> |
||
<span class="animated-item">ooooo</span> |
<span class="animated-item">ooooo</span> |
||
<span class="animated-item">0oooo</span> |
<span class="animated-item">0oooo</span> |
||
| 第19行： | 第19行： | ||
{{#css: {{动态显示/CSS| 6 }} }} |
{{#css: {{动态显示/CSS| 6 }} }} |
||
</pre> |
</pre> |
||
<span class="animated animated-6" style="height:auto;width:auto;display:inline-block;"> |
<span class="animated animated-6-1000" style="height:auto;width:auto;display:inline-block;"> |
||
<span class="animated-item">ooooo</span> |
<span class="animated-item">ooooo</span> |
||
<span class="animated-item">0oooo</span> |
<span class="animated-item">0oooo</span> |
||
| 第28行： | 第28行： | ||
</span> |
</span> |
||
{{#css: {{动态显示/CSS| 6 }} }} |
{{#css: {{动态显示/CSS| 6 }} }} |
||
<pre> |
|||
<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: {{动态显示/CSS| 6 | 500 }} }} |
|||
</pre> |
|||
<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: {{动态显示/CSS| 6 | 500 }} }} |
|||
<noinclude> |
<noinclude> |
||
[[分类:模板文档]] |
[[分类:模板文档]] |
||
2022年8月19日 (五) 20:50的版本
用法
{{动态显示/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: {{动态显示/CSS| 6 }} }}
ooooo 0oooo o0ooo oo0oo ooo0o oooo0 {{#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;
} }}
<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: {{动态显示/CSS| 6 | 500 }} }}
ooooo 0oooo o0ooo oo0oo ooo0o oooo0 {{#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;
} }}