1

我想利用 css 动画能力的优势进行无限动作来控制我每次以不同值作为目标的孩子然后在某个时候回到零等等。假设我想为一组 3 个 DIV 的背景着色，所以 CSS 代码将是：

<style>
div:nth-of-type(1){
-webkit-animation:coloring 2s infinite;
}

@-webkit-keyframes coloring{
from {background:red;}
to {background:yellow;}
}
<style>

因此，只要我使用无限属性，它就会永远存在，在这里我想连续增加 nth-of-type 的值（1,2,3），然后当达到 3 时它会回到 1

4

3 回答 3

2

非常有趣的问题。但我不认为 CSS 支持循环功能。

:nth-of-type()可以计算不同的索引，但结果将作​​为一个数组选择被禁用：

:nth-of-type(0,1,2,3). 这不支持任何迭代，所有元素将被一次选择。

然而，这在 javascript/jQuery 中是可能的，因为它支持迭代：

var count = 0;
var delay = 0;
$('div').each(function()
{
  $('div:eq(' + count +')').delay(delay)
  .queue(function()
         { 
            $(this).css('background', 'yellow');
         })
  count++;
  delay += 500;
})

它将迭代每个 div 元素。使用.eq()选择器，将选择基于索引值的每个元素，这样每个元素都会被一一选择。

通常这会在几秒钟内执行，所以你不会看到“一个接一个”的效果。

我曾经delay()在选择器上有一个延迟，每次迭代都会增加延迟。在这种情况下，每半秒.queue()后将添加一个新函数，因此每个函数在队列完成之前不会迭代。

将此与 css过渡相结合以获得淡入效果：

transition: background 2s;
-webkit-transition: background 2s; /* Safari */

jsFiddle

于 2013-11-11T15:42:39.887 回答
1

尝试这个：

HTML：

<div class="div active"></div>
<div class="div"></div>
<div class="div"></div>

CSS：

.active {
    -webkit-animation:coloring 3s;
}

JS：

var len = $(".div").length;
setTimeout(function () {
    change_bg();
},3000);
function change_bg() {
    var index = $(".active").index(); // get index of active div
    var current;
    $(".active").removeClass("active");
    if (index == len - 1) { // check if active div is last
        current = 0; // if last then start from first
    } else {
        current = index + 1; // increment otherwise
    }
    $(".div:eq(" + current + ")").addClass("active"); //change background of next div
    setTimeout(function () { //recursive calling
        change_bg();
    },3000);

}

在这里拉小提琴。

于 2013-11-11T15:59:31.570 回答
0

我正在审查我的问题，我想分享一种不同的方法来使用纯 CSS 实现这一目标：

@keyframes coloring {
    0% {
        background:red;
    }
    25% {
        background:yellow;
    }
    33% {
        background:#ccc;
    }
    75% {
        background:#ccc;
    }    
    100%{
        background:#ccc;
    }
}
.div {
    height:50px;
    background:#ccc;      
}
.first {
    -webkit-animation:coloring 9s ease-out 0s infinite;
    animation:coloring 9s ease-out 0s infinite;
    -moz-animation:coloring 9s ease-out 0s infinite;
    -webkit-animation:coloring 9s ease-out 0s infinite;
}
.second {
    -webkit-animation:coloring 9s ease-out 3s infinite;
    animation:coloring 9s ease-out 3s infinite;
    -moz-animation:coloring 9s ease-out 3s infinite;
    -webkit-animation:coloring 9s ease-out 3s infinite;
}
.third {
    -webkit-animation:coloring 9s ease-out 6s infinite;
    animation:coloring 9s ease-out 6s infinite;
    -moz-animation:coloring 9s ease-out 6s infinite;
    -webkit-animation:coloring 9s ease-out 6s infinite;
}
<div class="div first"></div>
<div class="div second"></div>
<div class="div third"></div>

于 2018-08-15T08:10:37.160 回答