ホームページ > 記事 > 毎日のプログラミング > CSS3（画像、テキスト+ビデオ）でマウスをホバーしたときに画像をゆっくり拡大する効果を実現するにはどうすればよいですか?
CSS3（画像、テキスト+ビデオ）でマウスをホバーしたときに画像をゆっくり拡大する効果を実現するにはどうすればよいですか?
- 藏色散人オリジナル
- 2018-10-12 13:44:3413953ブラウズ
この記事では主に、マウスを画像上でスライドさせたときに拡大効果を実現するための具体的な方法を紹介します。 主要な電子商取引 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>まずはフロントデスクに行き、画像効果を確認してください。
画像の上にマウスを置くと、効果は次のようになります:
写真を見れば一目瞭然ですが、拡大してあります。
このコードを直接コピーしてローカルでテストできます。ここで使用される主な css/css3 プロパティの一部は次のとおりです。
: 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 サイトの他の関連記事を参照してください。