3,389
个编辑
小
自定义时间间隔功能补全
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> | ||