用法
{{动态显示/CSS| 数量 | 每个元素显示的时间 }}
- 数量必填。
- 每个元素显示的时间选填,默认为1000(单位毫秒)。
示例
<span class="animated animated-6" 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;
} }}