css样式放大镜

CSS 样式放大镜是一种常用的交互特效，可以使得元素的细节之处更加清晰，提高用户体验。下面我们来学习一下如何实现该特效。

/* HTML 部分 */div class="zoom">
    img src="xxx.jpg" alt="" class="zoom-img">
    div class="zoom-view">
    /div>
    /div>
/* CSS 部分 */.zoom {
    position: relative;
    overflow: hidden;
    width: 300px;
    height: 300px;
}
.zoom .zoom-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    background: url(xxx.jpg) no-repeat;
    background-size: 600px 600px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    transform: scale(2);
    transform-origin: top left;
    opacity: 0;
    pointer-events: none;
    transition: all .3s ease;
}
.zoom:hover .zoom-view {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
    cursor: crosshair;
}
.zoom .zoom-img {
    display: block;
    max-width: 100%;
    height: auto;
}
    

在 HTML 部分，我们创建了一个 div 容器，并在其中加入一张图片以及另一个用于放大的 div 容器 zoom-view。其中 zoom-view 的背景颜色设置为需要放大的图片，重复不应用，大小设置为原图片的尺寸，然后缩放两倍，并且原点在左上角。 zoom-view 容器的初始透明度设置为 0，鼠标指针不可交互。在 CSS 部分，我们设置了 zoom 容器的宽高、超出部分隐藏。zoom-view 容器的位置设置为绝对位置，左上角对齐，并设置了 1 像素宽的边框和 10 像素的阴影。 当鼠标指针在 zoom 容器上时， zoom-view 容器的透明度设置为 1，鼠标指针可以交互，缩放大小变为 1，鼠标指针变为一个交叉形的鼠标光标。这样，我们就实现了一个简单的 CSS 样式放大镜效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！