模板:动态显示/CSS:修订间差异
< 模板:动态显示
Salt lovely(留言 | 贡献) (编辑“模板:动态显示/CSS” // 维基盐编辑器) |
Salt lovely(留言 | 贡献) 小 (自定义时间间隔功能补全) |
||
(未显示同一用户的2个中间版本) | |||
第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 |
@keyframes {{#var:animeName}} |
||
{ |
{ |
||
0% { opacity: 1; z-index: 20; } |
0% { opacity: 1; z-index: 20; } |
||
{{#var:showtime}}% { |
{{#var:showtime}}% { opacity: 1; z-index: 20; } |
||
{{#expr:{{#var:showtime}} + 0.0001}}% { opacity: 0; z-index: 10; } |
{{#expr:{{#var:showtime}} + 0.0001}}% { opacity: 0; z-index: 10; } |
||
100% { opacity: 0; z-index: 10; } |
100% { opacity: 0; z-index: 10; } |
||
第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