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

推薦する

初心者のためのウェブサイト構築入門 - ウェブサイト構築に必要な条件とツール

今日は、初心者の次のような質問に答えます。学ぶ勇気さえあれば、自分のウェブサイトを構築するのは簡単で...

mysqlはストアドプロシージャを使用してツリーノード取得メソッドを実装します。

図に示すように: テーブルデータこのようなツリーの場合、「Gao Yinrui」の下のすべてのノード...

ビューポートの基本原理と詳細な使用方法

1. ビューポートの概要モバイル ブラウザは通常、画面よりも幅の広い仮想ウィンドウにページをレンダリ...

JavaScript コードを省略する一般的な方法の概要

目次序文矢印関数一般的な配列操作をマスターするスプレッド演算子オブジェクトの省略形構造化割り当てデー...

Dockerfile を使用して Java ランタイム環境のミラーを作成する方法

現在の環境は次のとおりです。セントロス7.5 docker-ce 18.06.1-ce 1. まずc...

Win10にnginxをインストールして設定するプロセス

1. はじめにNginx は、無料のオープンソースの高性能 HTTP サーバーおよびリバース プロキ...

Mysql マルチテーブル結合クエリの実行の詳細について簡単に説明します。

まず、このブログのケースデモンストレーション テーブルを作成します。 create table a(...

現在のマウススライドの座標を取得するVue+openlayer5メソッド

序文: Vue プロジェクトで現在のマウスの座標を取得するにはどうすればよいでしょうか。ここで共有す...

適応レイアウトの処理について(フロートとマージンネガティブマージンを使用)

適応型レイアウトは、実際のアプリケーションでますます一般的になっています。今日は、主にフローティング...

MySQL にテーブルが存在するかどうかを確認し、それを一括で削除する方法

1. インターネットで長時間検索しましたが、判定表が存在するかどうかがわからなかったので、漠然と削除...

MySQLクエリ最適化プロセスを理解する

目次パーサーとプリプロセッサクエリオプティマイザーMySQL クエリの最適化には、解析、前処理、最適...

Windows 10 の仮想マシンに Mac システムをインストールするグラフィック チュートリアル

1. 仮想マシンバージョン15.5.1をダウンロードする公式サイトから直接最新バージョンをダウンロー...

Linux ファイル管理コマンド例の分析 [表示、閲覧、統計など]

この記事では、Linux ファイル管理コマンドについて例を挙げて説明します。ご参考までに、詳細は以下...

スクロール画像バーを実現するための CSS サンプルコード

一部の Web サイトでは、画像が連続的にスクロールしているのをよく見かけます。この効果は、CSS ...