CSS3でマウスクリックで画像を拡大する方法-フロントエンドQ&A-php.cn

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

青灯夜游

リリース： 2022-04-25 16:52:38

オリジナル

5511 人が閲覧しました

実装方法: 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でマウスクリックで画像を拡大する方法