0

単一の div にカーソルを合わせると、一度に 2 つのアニメーションを実行しようとしています。

1 つのアニメーションは、画像を 50% に拡大することです。もう 1 つのアニメーションは、テキストを 0 ～ 100% の範囲でスケーリングし、元の位置から 10 ピクセル上に移動します。

以下のコードを使用してスケーリング イメージのアニメーションを正常に作成しましたが、テキスト アニメーションのコーディングで問題が発生しています。

    -webkit-transform: scale(.5);

これは、JSFiddle で動作するスケーリング イメージ アニメーションです: http://jsfiddle.net/ZVScz/

0-100% から 10px に移動するテキストのアニメーションを実装するにはどうすればよいですか?

助けていただける方には、あらかじめ感謝いたします。

4

2 に答える 2

2

CSS セレクターの隣接セレクターを使用する必要がありますelem1 + elem2。elem2は直後でelem1、同じ親を持ちます。

私はhttp://jsfiddle.net/ZVScz/1/で効果のあるものを実装しました。変換を好みに合わせて調整できるようになりました。

ご不明な点がございましたら、お気軽にお問い合わせください。
フレッド

于 2013-10-13T00:08:56.073 に答える
0

使用してみてください：#worksContainer:hover #worksText { ... }

テキスト...に必要なアニメーションに置き換えます。

于 2013-10-13T00:11:28.970 に答える