css3でマウスを置くことで画像を拡大するにはどうすればよいですか? (コード付き)-CSSチュートリアル-php.cn

css3でマウスを置くことで画像を拡大するにはどうすればよいですか? (コード付き)

不言

リリース： 2018-10-10 14:11:03

オリジナル

13717 人が閲覧しました

css3 の学習では、小さなアニメーション効果を作成することがよくありますが、これは非常に興味深いものです。今日の記事では、画像の増幅を実現するための css3 の効果を紹介します。興味のある方はぜひご覧ください。

CSS3 では、要素の 2D または 3D 変換に適用されるtransform 属性が追加され、要素を回転、拡大縮小、移動、または傾けることができることは誰もが知っています。したがって、css3 で画像の拡大を実現するには、transform 属性が必要です。css3 で、transform 属性を使用して画像の拡大を実現する効果を見てみましょう。

最初のタイプ: css3 は、画像上にマウスを置くと画像が拡大され、余分な部分は隠されないという効果を実現します:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.enlarge{
    width: 300px;
    height: 300px;
    border: 1px #ffffff solid;
}
.enlarge img{
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: all 0.6s;
    -ms-transition: all 0.8s;
}
.enlarge img:hover{
    transform: scale(1.2);
    -ms-transform: scale(1.2);
}
</style>
</head>
<body>
<div class="enlarge">
    <img src="images/tu.jpg" alt="图片"/>
</div>      
</body>
</html>

ログイン後にコピー

css3 画像上にマウスを置くと画像が拡大される効果の前後の比較は以下のとおりです。画像を拡大し、隠れた部分を非表示にする効果:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.enlarge{
    width: 300px;
    height: 300px;
    overflow: hidden;
    border: 1px #ffffff solid;
}
.enlarge img{
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: all 0.6s;
    -ms-transition: all 0.8s;
}
.enlarge img:hover{
    transform: scale(1.3);
    -ms-transform: scale(1.3);
}
</style>
</head>
<body>
<div class="enlarge">
    <img src="images/tu.jpg" alt="图片"/>
</div>      
</body>
</html>

ログイン後にコピー

css3でマウスを置くことで画像を拡大するにはどうすればよいですか? (コード付き) css3 画像上にマウスを置いて拡大する前後の効果は次のとおりです。