CSS实现圆形放大镜狙击镜效果只有圆圈里的放大

下面是CSS实现圆形放大镜狙击镜效果的攻略：

1. 使用CSS实现圆形放大镜狙击镜效果的基本步骤

1.1 HTML部分

首先，需要在HTML中创建图像容器以及用于显示放大结果的空间容器，例如：

<div class="image-container">
  <img src="example.jpg" alt="example" id="zoom-img">
  <div class="zoom-container"></div>
</div>

在图片容器中，我们使用一个<img>标签来加载要放大的图片，同时，使用一个<div>标签来作为放大结果的容器。id="zoom-img"是我们指向图片元素的依据，class="image-container"和class="zoom-container"是我们使用CSS样式对元素进行样式设置的依据。

1.2 CSS部分

接下来，使用CSS对HTML中的元素进行样式设置。具体步骤如下：

对.image-container设置position: relative;，以便后续使用绝对定位（absolute）设置放大镜和放大框的位置，同时，设置宽度和高度，以适应图片尺寸。例如：.image-container { position: relative; width: 500px; height: 500px; }
对.zoom-container设置position: absolute;，以便将其置于图像容器的上层，并设置宽度和高度，作为放大效果的容器。例如：.zoom-container { position: absolute; width: 200px; height: 200px; }
通过设置圆角半径border-radius属性为50%来将zoom-container变成圆形。例如：.zoom-container { border-radius: 50%; }
将放大框（即圆形）隐藏起来并设置其border和box-shadow属性以生成放大镜的效果。例如：.zoom-container { display: none; border: 5px solid #ccc; box-shadow: 0 0 5px rgba(0,0,0,0.5); }
为放大镜绑定相应的事件。对鼠标移动的响应事件，放大镜会根据鼠标坐标变化而移动；对鼠标按下和松开的相应事件，放大框会出现和消失。例如：

.image-container:hover .zoom-container { display: block; }
.image-container:hover img { opacity: 0.3; }
.zoom-container { pointer-events: none; }
.image-container:hover .zoom-container { pointer-events: auto; }
.image-container:hover .zoom-container {
  top: -100px;
  left: -100px;
  background-position: -100px -100px;
}

以上就是CSS实现圆形放大镜狙击镜效果的基本步骤和样式设置方法。

2. 示范代码和说明

2.1 示例1

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>圆形放大镜狙击镜效果示例1</title>
    <style type="text/css">
        .image-container {
            position: relative;
            width: 500px;
            height: 500px;
        }
        .image-container:hover .zoom-container {
            display: block;
        }
        .image-container:hover img {
            opacity: 0.3;
        }
        .zoom-container {
            position: absolute;
            border: 5px solid #ccc;
            box-shadow: 0 0 5px rgba(0,0,0,0.5);
            width: 200px;
            height: 200px;
            border-radius: 50%;
            display: none;
            pointer-events: none;
            background-image: url(example.jpg);
            background-repeat: no-repeat;
        }
        .image-container:hover .zoom-container {
            pointer-events: auto;
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img src="example.jpg" alt="example" id="zoom-img">
        <div class="zoom-container"></div>
    </div>
</body>
</html>

以上代码实现了一个基本的圆形放大镜狙击镜效果示例。鼠标经过图片时，会出现圆形放大镜，放大结果为原图的一小部分。

2.2 示例2

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>圆形放大镜狙击镜效果示例2</title>
    <style type="text/css">
        .image-container {
            position: relative;
            width: 500px;
            height: 500px;
        }
        .image-container:hover .zoom-container {
            display: block;
        }
        .image-container:hover img {
            opacity: 0.5;
        }
        .zoom-container {
            position: absolute;
            border: 5px solid #427AA1;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            display: none;
            pointer-events: none;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 600px 600px;
            box-shadow: 0px 0px 5px 1px rgba(66,122,161,.5);
            transform-origin: 50% 50%;
        }
        .image-container:hover .zoom-container {
            pointer-events: auto;
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img src="example.jpg" alt="icon" id="zoom-img">
        <div class="zoom-container"></div>
    </div>
    <script>
        const $zoomContainer = document.querySelector('.zoom-container');
        $zoomContainer.style.backgroundImage = `url(example.jpg)`;
        const img = new Image();
        img.onload = () => {
            $zoomContainer.style.backgroundSize = `${img.width * 2}px ${img.height * 2}px`;
        }
        img.src = 'example.jpg';
        document.querySelector('.image-container').addEventListener('mousemove', (e) => {
            const zoomContainerSize = parseInt(getComputedStyle($zoomContainer).width, 10);
            const imageSize = parseInt(getComputedStyle(document.querySelector('#zoom-img')).width, 10);
            const halfContainerSize = zoomContainerSize / 2;
            const halfImageSize = imageSize / 2;
            const zoomX = (e.clientX - e.target.getBoundingClientRect().left) / imageSize * 100;
            const zoomY = (e.clientY - e.target.getBoundingClientRect().top) / imageSize * 100;
            $zoomContainer.style.left = `${e.clientX - halfContainerSize}px`;
            $zoomContainer.style.top = `${e.clientY - halfContainerSize}px`;
            $zoomContainer.style.backgroundPosition = `${zoomX}% ${zoomY}%`;
            $zoomContainer.style.transform = `scale(2)`;
        });
        document.querySelector('.image-container').addEventListener('mouseleave', (e) => {
            const $zoomContainer = document.querySelector('.zoom-container');
            $zoomContainer.style.transform = `scale(1)`;
            $zoomContainer.style.display = `none`;
            const $img = document.querySelector('#zoom-img');
            $img.style.opacity = 1;
        })
    </script>
</body>
</html>

以上代码实现了更加复杂和高级的圆形放大镜狙击镜效果，具体特点有：

放大器半径变小
放大器和放大结果滤镜的字体色值变成蓝色，样式更加美观
将放大框的大小固定为150x150
通过background-image属性设置放大镜放大的是原图指定的一小部分，并通过background-size将其放大至原图的两倍
放大结果可以随鼠标位置而相应变化
鼠标离开图片范围时，放大器消失

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS实现圆形放大镜狙击镜效果只有圆圈里的放大 - Python技术站

CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大