マウスを動かしたときに画像のズーム効果とゆっくりとした遷移効果を実現するCSSのサンプルコード

transform:scale()比例したズームインまたはズームアウトを実現できます。
transitionは、アニメーションの実行時間を設定して、アニメーションの実行を遅くしたり速くしたりできます。効果図は次のとおりです。

ここに画像の説明を挿入

ソースコード:

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<title>マウスが移動したときにズーム効果を実現する CSS</title>
        <スタイル タイプ="text/css">
        	div{
        		幅: 200ピクセル;
        		高さ: 300px;
        		マージン:0 自動;
        		上マージン: 100px;
        	}
        	div画像{
        		幅: 100%;
        		高さ: 100%;
        		transition: all 0.6s; //アニメーションの実行時間を0.6秒に設定する
        		カーソル: ポインタ;
        	}
        	div画像:hover{
        		transform: scale(1.2); //比率に応じて画像を1.2倍に拡大するように設定します }
        </スタイル>
	</head>
	<本文>
		<div>
			<img src="images/unnamed.jpg">
		</div>
	</本文>
</html>

- 画像が div からはみ出た場合にマスクします。

ここに画像の説明を挿入

ソースコード:

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<title>マウスが移動したときにズーム効果を実現する CSS</title>
        <スタイル タイプ="text/css">
        	div{
        		幅: 200ピクセル;
        		高さ: 300px;
        		マージン:0 自動;
        		上マージン: 100px;
        		overflow: hidden; //div を超えると画像は非表示になります }
        	div画像{
        		幅: 100%;
        		高さ: 100%;
        		transition: all 0.6s; //アニメーションの実行時間を0.6秒に設定する
        		カーソル: ポインタ;
        	}
        	div画像:hover{
        		transform: scale(1.3); //比率に応じて画像を1.3倍に拡大するように設定します }
        </スタイル>
	</head>
	<本文>
		<div>
			<img src="images/unnamed.jpg">
		</div>
	</本文>
</html>

これで、マウスが画像上を移動したときに CSS を使用して画像のズームとスロートランジション効果を実現する方法についての説明は終了です。マウスが画像上を移動したときに CSS で画像をズームする方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Jira リバースプロキシを実装するための nginx について

>>: MySQL 接続例外とエラー 10061 の解決方法