画像イメージに移動するマウス(転移の徐々に大きい、トランジション、アニメーション増幅プロセスになり、この遷移時間をカスタマイズすることができる)が大きくなるCSS3実現

CSS3変換:スケールは、()スケールまたは機能を低減実装されてもよいです。
遷移のCSS3 CSSプロパティの値は、一定の時間間隔内のスムーズな移行を可能にします。この効果は、マウスのクリック、フォーカス、または変更をトリガに任意の要素をクリックすると、スムーズにプロパティ値の変化のアニメーションCSSの影響によることができます。

下に示すように、結果:

マウスは非画像効果に配置されていない1:

 

画像にマウス場合2、(増幅プロセスは遷移をアニメーション化され、この遷移時間をカスタマイズすることができます)。


代码如下:
<DOCTYPE HTML!>
<HTML>
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル> </ TITLE>
<スタイルタイプ= "テキスト/ cssの">
のdiv {
幅:300ピクセル;
高さ:300ピクセル;
ボーダー:#000固体1pxの。
マージン:は50px自動;
オーバーフロー:隠されました;
}
DIV IMG {
カーソル:ポインタ。
トランジション:すべての0.6秒。
}
DIV IMG:ホバー{
変換:スケール(1.4)。
}
</スタイル>
</ HEAD>
<BODY>
の<div>
<IMG SRC = "IMG / focus.png" />
</ div>
</ BODY>
</ HTML>






7
8
9
10
11
12である
13である
14
15
16
17
18である
19。
20
21である
22である
23である
24
25
26である
27
28
項:
遷移:すべては、0.6S、すべての属性変更が0.6秒の期間内に完了する表します。
変換:スケール(1.4);スケーリングされた画像内の1.4倍を置かれたときにマウスのイメージを表します。

おすすめ

転載: www.cnblogs.com/web-shu/p/12014579.html