nth-child，为每个4的倍数元素指定样式

Question

我有一个基于4列网格的布局，我想以类似的方式应用CSS3动画;

<div class="block"></div><!-- animation-duration: 1s -->
<div class="block"></div><!-- animation-duration: 2s -->
<div class="block"></div><!-- animation-duration: 3s -->
<div class="block"></div><!-- animation-duration: 4s -->
<div class="block"></div><!-- animation-duration: 1s -->
<div class="block"></div><!-- animation-duration: 2s -->
<div class="block"></div><!-- animation-duration: 3s -->
<div class="block"></div><!-- animation-duration: 4s -->

所以基本上，第一列中的项目的动画持续时间为1秒，第二列中的项目具有2秒的动画持续时间等。

我如何与n-child实现这一目标？

Answer 1

要按照书面回答您的问题，您需要四种样式，每种动画持续时间一种：

.block:nth-child(4n) {
    animation-duration: 1s;
}

.block:nth-child(4n+1) {
    animation-duration: 2s;
}

.block:nth-child(4n+2) {
    animation-duration: 3s;
}

.block:nth-child(4n+3) {
    animation-duration: 4s;
}

:nth-child an + b :nth-child语法允许您用a表示循环频率，用b表示初始偏移量。 每种持续时间样式都需要自己的b偏移。

但是，如果要将其概括为m个样式（而不仅仅是4个），则应该通过脚本应用样式，而不是手动编写样式。

Answer 2

如果您正在寻找jquery代码，那么试试这个：

工作小提琴

$(document).ready(function(){
$('#maindiv .block').each(function(){
duration=($(this).index()%4+1)*1000 ;
$(this).css('animation-duration',($(this).index()%4+1)+'s')
})
})