[分享]css中怎么做放大镜

CSS中制作放大镜可以使用transform属性和伪元素配合实现。下面是一个简单的放大镜效果实现代码：

 <!-- HTML结构 -->
    <div class="container">
        <img src="example.jpg" class="img">
        <div class="magnifier"></div>
    </div>
    
    /* CSS样式 */
    .container {
        position: relative;
        overflow: hidden;
    }
    
    .img {
        display: block;
        max-width: 100%;
        height: auto;
    }
    
    .magnifier {
        position: absolute;
        top: 0;
        left: 0;
        width: 150px;
        height: 150px;
        border: 1px solid #ddd;
        z-index: 999;
        opacity: 0;
        pointer-events: none;
        background-repeat: no-repeat;
        background-size: 300% 300%;
        background-color: #fff;
        transform: scale(2);
        transform-origin: 0 0;
    }
    
    .container:hover .magnifier {
        opacity: 1;
        pointer-events: auto;
    }
    
    .container:hover .img {
        transform: scale(1.5);
    }
    
    .magnifier::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -25px 0 0 -25px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.8);
        pointer-events: none;
    } 

这个代码的原理就是在图片上面放了一个蒙层，并且通过鼠标移动的位置计算出放大镜的位置和背景图的位置，从而达到原图被放大的效果。具体来说，主要是利用了transform属性来缩放图片和放大镜，和transform-origin属性来控制缩放的基点，以及background-position属性来实现背景图的移动。

以上是关于CSS制作放大镜的简单介绍。我们可以根据自己的需求进行调整和优化，实现更好的效果。