简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > フロントエンドQ&A > 本文

CSS3でマウスクリックで画像を拡大する方法

青灯夜游
リリース： 2022-04-25 16:52:38
オリジナル
5478 人が閲覧しました

実装方法: 1. ":active" セレクターを使用して画像上のマウス クリックの状態を選択します; 2. 変換属性とscale() 関数を使用して画像の拡大効果を実現します。 「img:active {transform:scale(x軸倍率,y軸倍率);}」。

CSS3でマウスクリックで画像を拡大する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

css3 はマウスクリックによる画像の拡大を実現します

実装アイデア:

  • Use ": active" セレクターは、マウスをクリックした画像の状態を選択します。

  • transform 属性とscale() 関数を使用して、拡大効果を実現します。

構文: 

img:active {transform: scale(2,2);}
ログイン後にコピー

実装例: 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
img:active {
margin: 100px;
transform: scale(2, 2);
}
</style>
</head>
<body>
<img  src="img/1.jpg"    style="max-width:90%" / alt="CSS3でマウスクリックで画像を拡大する方法" >
</body>
</html>
ログイン後にコピー

CSS3でマウスクリックで画像を拡大する方法

説明:

active の英語解釈は「正」であり、これはマウスをクリックすることはクリックすることを意味します。アクティブ セレクターの最も一般的な例はリンクに適用されると思われますが、リンクを開くのは瞬間的なアクションであり、アクティブ セレクターの特性を十分に反映していません。

Transform プロパティは、要素に 2D または 3D 変換を適用します。このプロパティを使用すると、要素の回転、拡大縮小、移動、傾斜などを行うことができます。このアトリビュートをscale()関数と一緒に使用すると、アトリビュート要素がスケーリングされます。

(学習ビデオ共有: css ビデオ チュートリアル 、Web フロントエンド )

以上がCSS3でマウスクリックで画像を拡大する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css3
ソース：php.cn
前の記事：es6 で配列トラバーサルを実装する方法 次の記事：es6の2次元配列を1次元配列に変換する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！