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;
}

an + b的{{3}}可让您使用a表示循环频率，并使用b表示初始偏移量。每种持续时间样式都需要自己的b偏移量。

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

Answer 2

如果您正在寻找jquery代码，请尝试以下方法：

<强> Working Fiddle

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

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

2 个答案: