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

マウスを動かしたときに画像のズーム効果とゆっくりとした遷移​​効果を実現する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 の解決方法

推薦する

Docker で Node プロジェクトをビルドしてデプロイする方法

目次DockerとはクライアントサイドDocker基本的なDocker操作画像名画像をプルするその他...

type="file" の入力ボックスのスタイル変更の概要

入力タイプ「file」とは何ですか?これが何なのかは説明する必要はないと思います。誰もが知っているこ...

表内のコンテンツオーバーフローのレイアウト方法について

コンテンツオーバーフローとは何ですか?実際、テキストが大量にある場合、コンテンツ領域がそれだけの長さ...

better-scrollプラグインのスライドできないバグについて(2021年プラグインで解決)

より良いスクロールの原則親コンテナーであるため、ラッパーの高さはコンテンツのサイズに応じて増加します...

webpackコード断片化の実装

目次背景コモンズチャンクプラグイン分割チャンク構成リソースを非同期に読み込む要約する背景高性能なアプ...

Vueは適切なスライドアウトレイヤーアニメーションを実装します

この記事では、適切なスライドアウトレイヤーアニメーションを実装するためのVueの具体的なコードを例と...

Win10にCentOS7仮想マシンをインストールする

1. VMware Workstation 64バージョンをダウンロードするhttps://www....

MySQLトランザクションが効率に与える影響の分析と概要

1. データベース トランザクションによりデータベースのパフォーマンスが低下します。データの一貫性と...

mysql indexof関数の使用手順

以下のように表示されます。 LOCATE(部分文字列、文字列)文字列 str 内の部分文字列 sub...

binlog2sql と簡単なバックアップおよびリカバリを使用して mysql8.0.20 を構成するための詳細な手順

目次最初のステップのインストールステップ2: MySQLデータを準備する3 番目のステップは、bin...

HTMLの基本構造を包括的に理解する

HTML入門ハイパーテキスト マークアップ言語: ハイパーテキスト マークアップ言語ハイパーテキスト...

du コマンドを使用して Linux システム ディレクトリのサイズを取得する方法

Linux システムを使用したことがある人なら、Linux システムの ls コマンドは通常、ファイ...

sshとは何ですか?使い方は?どのような誤解があるのでしょうか?

目次序文SSHとは何かssh は何に使用されますか? sshの使い方ssh 再修正要約する序文ssh...

CSS3で線形グラデーションを実装するためのコードの詳細な説明

序文デモでは古いバージョンのブラウザのグラデーションが実装されています[IE9-]。 IE9 より前...

WeChatアプレットでQRコードを識別するために長押しする実装プロセス

序文公式アカウントのQRコードは長押しで認識できることは皆さんご存じですが、ミニプログラムに対する制...