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

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

王林

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

オリジナル

2187 人が閲覧しました

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;
}