ホームページ > 記事 > ウェブフロントエンド > CSS3でマウスクリックで画像を拡大する方法
CSS3でマウスクリックで画像を拡大する方法
- 青灯夜游オリジナル
- 2022-04-25 16:52:385381ブラウズ
実装方法: 1. ":active" セレクターを使用して画像上のマウス クリックの状態を選択します; 2. 変換属性とscale() 関数を使用して画像の拡大効果を実現します。 「img:active {transform:scale(x軸倍率,y軸倍率);}」。
このチュートリアルの動作環境: 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>
説明:
active の英語解釈は「正」であり、これはマウスをクリックすることはクリックすることを意味します。アクティブ セレクターの最も一般的な例はリンクに適用されると思われますが、リンクを開くのは瞬間的なアクションであり、アクティブ セレクターの特性を十分に反映していません。
Transform プロパティは、要素に 2D または 3D 変換を適用します。このプロパティを使用すると、要素の回転、拡大縮小、移動、傾斜などを行うことができます。このアトリビュートをscale()関数と一緒に使用すると、アトリビュート要素がスケーリングされます。
(学習ビデオ共有: css ビデオ チュートリアル 、Web フロントエンド )
以上がCSS3でマウスクリックで画像を拡大する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。