CSS を使用して虫眼鏡効果を実装するためのヒントと方法-CSSチュートリアル-php.cn

CSS を使用して虫眼鏡効果を実装するためのヒントと方法

王林

リリース： 2023-10-20 14:12:11

オリジナル

2182 人が閲覧しました

CSS を使用して虫眼鏡効果を実装するためのヒントと方法

CSS を使用して虫眼鏡効果を実現するためのヒントと方法

要約: CSS は、Web デザインにおいて重要な役割を果たします。テキストと画像のスタイルを制御するだけではありません。だけでなく、いくつかのクールな特殊効果も実現できます。この記事では、CSS を使用して虫眼鏡効果を実装する方法と、具体的なコード例を紹介します。

1. 準備

始める前に、いくつかの画像リソースと基本的な HTML 構造が必要です。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="container">
    <img src="/static/imghw/default1.png"  data-src="image.jpg"  class="lazy" alt="图片">
    <div class="zoom"></div>
  </div>
</body>
</html>

ログイン後にコピー

このうち、image.jpg は表示する必要がある画像、style.css は虫眼鏡を実現するために使用するスタイルシートです。効果。次に、特殊効果のスタイルを style.css に追加します。

2. 基本スタイル

まず、画像コンテナと虫眼鏡のスタイルを作成する必要があります。

.container {
  position: relative;
}

.zoom {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  background-color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
  visibility: hidden;
}

ログイン後にコピー

ここでは、虫眼鏡スタイルをコンテナに対して相対的に配置できるように、画像コンテナの位置を相対配置に設定します。虫眼鏡スタイルには、幅、高さ、境界線、背景色などの基本的なスタイルがいくつかあります。 pointer-events: none; および visibility: hidden; を使用して、虫眼鏡要素を非表示に設定します。

3. 虫眼鏡効果を実現します

次に、マウスイベントとCSSを使って虫眼鏡効果を実現していきます。

.zoom:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 400% 400%;
  background-repeat: no-repeat;
  visibility: hidden;
}

.container:hover .zoom {
  visibility: visible;
}

ログイン後にコピー

ここでは、擬似要素 :before を使用して、虫眼鏡のマスクレイヤを作成します。マスクレイヤのスタイルには、絶対位置、100% の幅と高さ、および非表示の表示設定が含まれます。マスクレイヤーの背景画像のサイズを 400% に設定することで拡大効果を実現します。マウスがイメージコンテナー上にあるときに、虫眼鏡の表示設定を可視に設定します。

4. 動きエフェクトを実装する

最後に、増幅エフェクトに動きエフェクトを追加する必要があります。

.container:hover .zoom:before {
  visibility: visible;
}

.container:hover .zoom {
  background-image: url("image.jpg");
}

.container:hover .zoom:before {
  background-image: url("image.jpg");
  transform-origin: 0 0;
}

.container:hover .zoom:before {
  background-position: -100px -100px;
}

ログイン後にコピー

背景画像を元の画像に設定することで、拡大効果を得ることができます。 transform-origin を 0 0 に設定すると、虫眼鏡が左上隅に正しく配置されるようになります。最後に、マスクレイヤーの背景位置に負の値を設定することで拡大効果を実現します。

要約すると、虫眼鏡の特殊効果を正常に実装できました。合理的な HTML 構造と CSS スタイルを通じて、さまざまな特殊効果を簡単に追加して、Web ページのインタラクティブなエクスペリエンスを向上させることができます。

参考:
[1] W3Schools. CSS セレクター. [オンライン]https://www.w3schools.com/csSref/css_selectors.php. [2021 年 8 月 24 日にアクセス].

以上がCSS を使用して虫眼鏡効果を実装するためのヒントと方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。