2

我一直在使用 CSS 中的渐进式变换和过渡。到目前为止它看起来还不错，但我想知道如何让它通用——也就是说，对于任何数量的孩子。

dabblet/gist 在这里- 你可以立即看到这是为少数孩子硬编码的。我不想写div+div+div+div....如下规则 - 可能有一种巧妙的方法来实现这一点，但欢迎任何想法。

.fan:hover div {
    -webkit-transform: rotate(10deg);
    top: -10px;
    left: 5px;
    box-shadow: 0 2px 10px rgba(128,128,128,0.3);
}
.fan:hover div+div {
    -webkit-transform: rotate(20deg);
    top: -15px;
    left: 10px;
}
.fan:hover div+div+div {
    -webkit-transform: rotate(30deg);
    top: -20px;
    left: 15px;
}

编辑：我意识到它们现在也只是 webkit 规则；）

4

1 回答 1

1

快速浏览您的代码：

http://dabblet.com/gist/2574800

对于第二个，修改后的风扇，只有.fan:hover div规则适用，但由于嵌套变换规则在您的 div 上多次应用，所以第一个 div 旋转 10 度，第二个 10 + 10 度等等......你可能不得不进一步调整规则，但我认为原则是明确的。

于 2012-05-02T07:28:59.850 回答