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

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

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

MCBBS Wiki GitHub群组已上线!

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

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

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

模板:动态显示/CSS/doc:修订间差异

来自MCBBS Wiki
跳到导航 跳到搜索
(.)
 
→‎示例
第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;

} }}