純粋な CSS3 を使用してクールな画像拡大効果を作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

純粋な CSS3 を使用してクールな画像拡大効果を作成するにはどうすればよいですか?

青灯夜游

Aug 20, 2021 pm 06:24 PM

css3 拡大鏡マウスオーバー

「CSS3を使ってかっこいい三角の背景画像を作る」という記事で、CSS3を使ってWebページを高級感のあるかっこいい三角の背景画像を作る方法を紹介しました！今回は、純粋な CSS3 を使用してマウスオーバー画像の拡大効果を実現する方法について説明します。興味のある友人はそれについて学ぶことができます~

マウスオーバー画像の拡大効果は非常に便利で目-特殊効果をキャッチする Web ページにインタラクティブ性を追加するユーザーが画像の上にマウスを置くと、画像がわずかに拡大されます。画像表示ページに適しており、ユーザーエクスペリエンスを大幅に向上させます。

コードから直接始めましょう:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.img-wrapper {
  width: 220px;
  height: 220px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.img-wrapper img {
  height: 220px;
  -webkit-transition: 0.3s linear;
  transition: 0.3s linear;
}

.img-wrapper img:hover {
  transform: scale(1.1);
}

.img-wrapper {
  display: inline-block;
  box-sizing: border-box;
  border: 3px solid #000;
}
/* ============== 
* 灰度滤镜
* ==============*/
.grayscale-img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.grayscale-img:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

/* ============== 
* 深褐色滤镜
* ==============*/
.sepia-img {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
}

.sepia-img:hover {
  -webkit-filter: sepia(0);
  filter: sepia(0);
}


</style>
</head>
<body>
<div class="img-wrapper">
  <img  src="/static/imghw/default1.png"  data-src="demo/img/1.jpg"  class="lazy"  / alt="純粋な CSS3 を使用してクールな画像拡大効果を作成するにはどうすればよいですか?" >
</div>
<!-- 灰度滤镜 -->
<div class="img-wrapper">
  <img  class="grayscale-img lazy"  src="/static/imghw/default1.png"  data-src="demo/img/1.jpg"   / alt="純粋な CSS3 を使用してクールな画像拡大効果を作成するにはどうすればよいですか?" >
</div>

<!-- 深褐色滤镜 -->
<div class="img-wrapper">
  <img class="sepia-img lazy"  src="/static/imghw/default1.png"  data-src="demo/img/1.jpg"   
  />
</div>

</body>
</script>
</body>
</html>

ログイン後にコピー

結果は以下のようになります:

純粋な CSS3 を使用してクールな画像拡大効果を作成するにはどうすればよいですか?

OK、上記のコードを分析しましょう:

最初に、img タグをラップする div を作成します。div コンテナの機能は、画像をブロックすることです。画像が拡大されるときに、画像が指定した幅と高さを超えないようにする必要があります。 div でこの機能を実現したい場合は、画像を拡大したときに余分な部分が隠れるようにキースタイル overflow: hidden; を設定する必要があります。

<div class="img-wrapper">
  <img  src="/static/imghw/default1.png"  data-src="demo/img/1.jpg"  class="lazy"  / alt="純粋な CSS3 を使用してクールな画像拡大効果を作成するにはどうすればよいですか?" >
</div>

.img-wrapper {
  width: 220px;
  height: 220px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

ログイン後にコピー

次に画像拡大効果ですが、ここで使用するのは transform:scale(1,1) スタイルです。 transform 属性は要素に 2D または 3D 変換を適用できます。一方、scale は要素を拡大 (整数の場合は拡大) または縮小 (負の数の場合は縮小) するために使用されます。。

.img-wrapper img {
  height: 220px;
}
.img-wrapper img:hover {
  transform: scale(1.1);
}

ログイン後にコピー

純粋な CSS3 を使用してクールな画像拡大効果を作成するにはどうすればよいですか?

この方法で実現される画像拡大効果は突然であり、マウスをホバーすると突然拡大します。トランジション属性を使用してトランジション効果を追加できます。属性は CSS3 の新しい属性です。他のブラウザと互換性を持たせるためにプレフィックスを追加する必要があります。

.img-wrapper img {
  height: 220px;
  -webkit-transition: 0.3s linear;  /* 兼容谷歌浏览器 */
  transition: 0.3s linear;
}

ログイン後にコピー

純粋な CSS3 を使用してクールな画像拡大効果を作成するにはどうすればよいですか?

これにより、マウスオーバーによる画像の拡大効果が得られます。しかし、この種の拡大効果は少し単調です。画像にフィルタ属性 filter を設定して、画像の拡大効果をさらにクールにすることができます。

最初に画像をグレー (フィルター: グレースケール(100%)) またはダークブラウン (フィルター: セピア(100%)) にしてから、ホバーすると、画像が拡大されながら色が変化するため (フィルター効果を削除するだけです)、特殊効果がさらにクールになります。

<!-- 灰度滤镜 -->
<div >
  <img class="grayscale-img lazy"  src="/static/imghw/default1.png"  data-src="demo/img/1.jpg"   
  />
</div>

.grayscale-img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.grayscale-img:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}



<!-- 深褐色滤镜 -->
<div class="img-wrapper">
  <img class="sepia-img lazy"  src="/static/imghw/default1.png"  data-src="demo/img/1.jpg" 
    
    
  />
</div>

.sepia-img {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
}

.sepia-img:hover {
  -webkit-filter: sepia(0);
  filter: sepia(0);
}

ログイン後にコピー

純粋な CSS3 を使用してクールな画像拡大効果を作成するにはどうすればよいですか?

滤镜属性filter定义了元素(通常是<img  alt="純粋な CSS3 を使用してクールな画像拡大効果を作成するにはどうすればよいですか?" >)的可视效果(例如：模糊与饱和度)。

可以设置的滤镜效果：
blur(px)：给图像设置高斯模糊。    
brightness(%)：给图片应用一种线性乘法，使其看起来更亮或更暗。    
contrast(%) ：调整图像的对比度。    
drop-shadow(h-shadow v-shadow blur spread color)：给图像设置一个阴影效果。
grayscale(%)：将图像转换为灰度图像
hue-rotate(deg) ：给图像应用色相旋转。
invert(%) ：反转输入图像。
opacity(%)：转化图像的透明程度。
saturate(%)： 转换图像饱和度。
sepia(%) ： 将图像转换为深褐色。

ログイン後にコピー

PHP 中国語 Web サイトプラットフォームには、多くのビデオ教育リソースがあります。皆さんも「css ビデオチュートリアル」を学習してください。

以上が純粋な CSS3 を使用してクールな画像拡大効果を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7521

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

純粋な CSS3 で波の効果を実現するにはどうすればよいですか? (コード例) Jun 28, 2022 pm 01:39 PM

純粋な CSS3 で波の効果を実現するにはどうすればよいですか?この記事ではSVGとCSSアニメーションを使って波のエフェクトを作成する方法をご紹介しますので、お役に立てれば幸いです。

CSSを上手に使って色々な変わった形のボタンを実現（コード付き） Jul 19, 2022 am 11:28 AM

この記事では、頻繁に登場する様々な奇妙な形のボタンをCSSを使って簡単に実現する方法を紹介しますので、ぜひ参考にしてください。

スペースを取らずにCSS内の要素を非表示にする方法 Jun 01, 2022 pm 07:15 PM

2 つの方法: 1. display 属性を使用して、要素に「display:none;」スタイルを追加するだけです。 2. Position 属性と top 属性を使用して、要素の絶対位置を設定し、要素を非表示にします。要素に「position:absolute;top:-9999px;」スタイルを追加するだけです。

Win11でマウスホバー時間を設定するにはどうすればよいですか? Win11 マウスホバー時間設定チュートリアル Feb 01, 2024 pm 02:54 PM

Win11でマウスホバー時間を設定するにはどうすればよいですか? win11システムを使用している場合、マウスホバー時間を設定できますが、多くのユーザーは設定方法がわかりません?ユーザーは直接クリックして新しいテキストドキュメントを作成し、次のコードを入力してそれを直接使用できます。このサイトでは、Win11 でマウスホバー時間を設定する方法をユーザーに丁寧に紹介します。 Win11でマウスホバー時間を設定する方法 1. デスクトップの何もないところで[右クリック]をクリックし、開いたメニューから[新規作成 - テキストドキュメント]を選択します。 3. 次に、左上の [ファイル] をクリックし、開いたドロップダウン項目で [名前を付けて保存] を選択するか、キーボードのショートカットキー [Ctrl+Shift+S] を押します。 6

CSS3でレースボーダーを実装する方法 Sep 16, 2022 pm 07:11 PM

CSS では、border-image 属性を使用してレースの境界線を実現できます。 border-image 属性では、画像を使用して境界線を作成できます。つまり、境界線に背景画像を追加できます。背景画像をレーススタイルとして指定するだけで済みます。構文「border-image: url (画像パス) は、内側への画像境界線の幅。開始を繰り返すかどうか;"。

テキストカルーセルと画像カルーセルも純粋な CSS を使用して実現できることがわかりました。 Jun 10, 2022 pm 01:00 PM

テキストカルーセルと画像カルーセルを作成するにはどうすればよいですか?皆さんが最初に考えるのはjsを使うかどうかですが、実はテキストカルーセルや画像カルーセルも純粋なCSSでも実現できますので実装方法を見ていきましょう。

JavaScript で画像の拡大鏡効果を実装するにはどうすればよいですか? Oct 18, 2023 am 08:45 AM

JavaScript で画像の拡大鏡効果を実現するにはどうすればよいですか? Web デザインでは、詳細な商品画像を表示するために画像拡大鏡効果がよく使用されます。マウスを画像上に置くと、マウスの位置に拡大レンズが表示され、画像の一部が拡大され、詳細がより鮮明に表示されます。この記事では、JavaScript を使用して画像の拡大鏡効果を実現する方法とコード例を紹介します。 1. HTML 構造まず、虫眼鏡を使用したページレイアウトを作成する必要があります。 HTML テキスト内