2

私は、CSSのプログレッシブ変換とトランジションを組み合わせて遊んでいます。これまでのところかなり見栄えが良いですが、どうすればそれを一般的なものにすることができるのか、つまり、どんな量の子供たちにとっても知りたいのです。

小冊子/要点はここにあります-そして、これが少量の子供のためにハードコーディングされていることがすぐにわかります。私は以下のようにルールを書く必要はありません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

2番目の変更されたファンの場合、.fan:hover divルールのみが適用されますが、ネストのおかげで、変換ルールがdivに複数回適用されるため、最初のdivは10度回転し、2番目のdivは10+10度回転します。ルールをさらに調整しますが、原則は明確だと思います。

于 2012-05-02T07:28:59.850 に答える