Question

有四个图像，每个图像必须通过顺序使用时间延迟来实现边界效果（css）。例如：

O O. O O

5秒后

O O O O

5秒后

哦，O O O

有谁知道怎么做？

Answer 1

如果你必须使用CSS那么，鉴于下面的HTML，这是可能的（虽然有点笨重）：

<div id="timer">
    <div class="interval"></div>
    <div class="interval"></div>
    <div class="interval"></div>
    <div class="interval"></div>
</div>

CSS：

@-moz-keyframes loading {
    0%, 24% {
        border-color: #f00;
    }
    25%, 100% {
        border-color: #000;
    }
}

@-ms-keyframes loading {
    0%, 24% {
        border-color: #f00;
    }
    25%, 100% {
        border-color: #000;
    }
}

@-o-keyframes loading {
    0%, 24% {
        border-color: #f00;
    }
    25%, 100% {
        border-color: #000;
    }
}

@-webkit-keyframes loading {
    0%, 24% {
        border-color: #f00;
    }
    25%, 100% {
        border-color: #000;
    }
}

@keyframes loading {
    0%, 24% { /* stops the gradual fading-out */
        border-color: #f00;
    }
    25%, 100% {
        border-color: #000;
    }
}

#timer .interval {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1px solid #000;
    border-radius: 50%;
    -moz-animation: loading 20s linear infinite;
    -ms-animation: loading 20s linear infinite;
    -o-animation: loading 20s linear infinite;
    -webkit-animation: loading 20s linear infinite;
    animation: loading 20s linear infinite;
}

#timer .interval:nth-child(1) {
    -moz-animation-delay: 0;
    -ms-animation-delay: 0;
    -o-animation-delay: 0;
    -webkit-animation-delay: 0;
    animation-delay: 0;
}

#timer .interval:nth-child(2) {
    -moz-animation-delay: 5s;
    -ms-animation-delay: 5s;
    -o-animation-delay: 5s;
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}

#timer .interval:nth-child(3) {
    -moz-animation-delay: 10s;
    -ms-animation-delay: 10s;
    -o-animation-delay: 10s;
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
}

#timer .interval:nth-child(4) {
    -moz-animation-delay: 15s;
    -ms-animation-delay: 15s;
    -o-animation-delay: 15s;
    -webkit-animation-delay: 15s;
    animation-delay: 15s;
}

JS Fiddle demo

或者，使用CSS过渡但使用JavaScript，在这种情况下jQuery（为简单起见），触发下一步，而不是手动使用和设置animation-delay与CSS：

function transNext(currentEl, transitionClass) {
    if (!currentEl) {
        return false;
    }
    else {
        transitionClass = transitionClass || 'interval';
        var cur = $(currentEl),
            nxt = cur.next().length ? cur.next() : cur.prevAll(':last');
        cur.removeClass(transitionClass);
        nxt.addClass(transitionClass);

    }
}

$('#timer').on('mozAnimationEnd msAnimationEnd oAnimationEnd webkitAnimationEnd animationEnd', function(e) {
    transNext(e.target, 'interval');
});

修改后的CSS：

@-moz-keyframes loading {
    0%, 99% {
        border-color: #f00;
    }
    100% {
        border-color: #000;
    }
}

@-ms-keyframes loading {
    0%, 99% {
        border-color: #f00;
    }
    100% {
        border-color: #000;
    }
}

@-o-keyframes loading {
    0%, 99% {
        border-color: #f00;
    }
    100% {
        border-color: #000;
    }
}

@-webkit-keyframes loading {
    0%, 99% {
        border-color: #f00;
    }
    100% {
        border-color: #000;
    }
}

@keyframes loading {
    0%, 99% { /* stops the gradual fading-out */
        border-color: #f00;
    }
    100% {
        border-color: #000;
    }
}

#timer div {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1px solid #000;
    border-radius: 50%;
}

#timer .interval {
    -moz-animation: loading 5s linear 1;
    -ms-animation: loading 5s linear 1;
    -o-animation: loading 5s linear 1;
    -webkit-animation: loading 5s linear 1;
    animation: loading 5s linear 1;
}

JS Fiddle demo

Answer 2

可以使用''setInterval'' JavaScript函数。请查看this JSFiddle here，了解其工作原理。

<强> HTML：

<div class="container">
    <div class="marker"></div>
    <div class="marker"></div>
    <div class="marker"></div>
    <div class="marker"></div>
</div>

<强> CSS ：

.marker {
    background: #999;
    float: left;
    width: 20px;
    height: 20px;
    margin: 0 5px 0 0;
}

.marked {
    border: 2px solid red;
}

的 JavaScript的：

jQuery(function() { // Set border around first element jQuery('.container .marker:first').addClass('marked'); // Start interval with 5 second steps var iv = setInterval(function() { // Executes every 5 seconds // Is there a next element? if (jQuery('.marker.marked').next('.marker').length == 1) { jQuery('.marker.marked') // actual marked element .removeClass('marked') // remove border .next('.marker') // go to next element .addClass('marked'); // add border } else { // No next element? Start again with first element jQuery('.marker.marked').removeClass('marked'); jQuery('.container .marker:first').addClass('marked'); } }, 5000); });

从您的问题中不清楚是否要从左到右进行一次运行，或者如果必须在序列中的最后一个图像后再次从左侧开始。我的例子在最后一个div后停止。您必须使用图像元素替换DIV元素。他们只需要具有类''marker''属性。

编辑：上面更新的小提琴/代码会循环显示元素，并再次使用第一个元素重复。

自动延时css横幅

2 个答案: