CSS3（画像、テキスト+ビデオ）でマウスをホバーしたときに画像をゆっくり拡大する効果を実現するにはどうすればよいですか?-CSSの知識-php.cn

CSS3（画像、テキスト+ビデオ）でマウスをホバーしたときに画像をゆっくり拡大する効果を実現するにはどうすればよいですか?

藏色散人

リリース： 2018-10-12 13:44:34

オリジナル

13964 人が閲覧しました

この記事では主に、マウスを画像上でスライドさせたときに拡大効果を実現するための具体的な方法を紹介します。主要な電子商取引 Web サイトを閲覧するとき、最も一般的な画像の動的効果は、マウスを画像内に移動したり、画像上にマウスを置いたりしたときの拡大効果です。このような動的な効果を実現する主な目的は、製品コンテンツを強調し、ユーザーエクスペリエンスを向上させることです。

コードの初心者にとって、この効果は確かに非常に魅力的ですが、HTML/CSS コードを通じてそれを実現したい場合は、どこから始めればよいかわからないかもしれません。

実際、コードの実装は非常に簡単です。以下では、簡単な例を使用して、マウスが通過した後に画像を拡大する方法を紹介します。

マウスを画像内に移動したときの拡大効果の HTML/CSS コード例は次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>html/Css3实现图片缩放</title>
    <style type="text/css">
        #div1{
            width: 500px;
            margin: 150px auto;
        }
        #div1 img{
            transition: all 0.5s;
            border-radius:5px;
            border: #eee solid 2px;
        }
        #div1 img:hover{
            transform: scale(1.5);
        }
    </style>
</head>
<body style="background: #000">
<div id="div1">
    <img  src="123123.png" / alt="CSS3（画像、テキスト+ビデオ）でマウスをホバーしたときに画像をゆっくり拡大する効果を実現するにはどうすればよいですか?" >
</div>
</body>
</html>

ログイン後にコピー

まずはフロントデスクに行き、画像効果を確認してください。

CSS3（画像、テキスト+ビデオ）でマウスをホバーしたときに画像をゆっくり拡大する効果を実現するにはどうすればよいですか? 画像の上にマウスを置くと、効果は次のようになります:

CSS3（画像、テキスト+ビデオ）でマウスをホバーしたときに画像をゆっくり拡大する効果を実現するにはどうすればよいですか? 写真を見れば一目瞭然ですが、拡大してあります。

このコードを直接コピーしてローカルでテストできます。ここで使用される主な css/css3 プロパティの一部は次のとおりです。

border-radius

: to div要素に丸い境界線を追加します。

:hover

セレクターは、マウスポインターが浮いている要素を選択するために使用されます。

transform

: 要素に 2D または 3D 変換を適用します。このプロパティを使用すると、要素を回転、拡大縮小、移動、または傾けることができます。ここで、値scale(x,y) 2D スケーリング変換を定義します。 (この例では、画像ズームを 1.5 倍に設定します)

transition

: 4 つのトランジション属性を設定するために使用される短縮属性。 (この例では、効果が唐突になりすぎないように、画像を拡大するときの遷移時間を 0.5 秒に設定しています) この記事は、html/css/css3 を使用して、マウスを押したときに画像を拡大する効果を実現する方法について説明しています。それを通り過ぎます。とてもシンプルで分かりやすいので、困っている友達のお役に立てれば幸いです！

HTML/css についてさらに詳しく知りたい場合は、PHP 中国語 Web サイトの

HTML ビデオチュートリアル

および CSS ビデオチュートリアル、CSS3 ビデオチュートリアルを参照してください。、皆さんもぜひ参考にして勉強してください！

以上がCSS3（画像、テキスト+ビデオ）でマウスをホバーしたときに画像をゆっくり拡大する効果を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。