CSS 樣式放大鏡是一種常用的交互特效，可以使得元素的細(xì)節(jié)之處更加清晰，提高用戶體驗。下面我們來學(xué)習(xí)一下如何實現(xiàn)該特效。

/* 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 部分，我們創(chuàng)建了一個 div 容器，并在其中加入一張圖片以及另一個用于放大的 div 容器 zoom-view。其中 zoom-view 的背景顏色設(shè)置為需要放大的圖片，重復(fù)不應(yīng)用，大小設(shè)置為原圖片的尺寸，然后縮放兩倍，并且原點在左上角。 zoom-view 容器的初始透明度設(shè)置為 0，鼠標(biāo)指針不可交互。在 CSS 部分，我們設(shè)置了 zoom 容器的寬高、超出部分隱藏。zoom-view 容器的位置設(shè)置為絕對位置，左上角對齊，并設(shè)置了 1 像素寬的邊框和 10 像素的陰影。 當(dāng)鼠標(biāo)指針在 zoom 容器上時， zoom-view 容器的透明度設(shè)置為 1，鼠標(biāo)指針可以交互，縮放大小變?yōu)?1，鼠標(biāo)指針變?yōu)橐粋€交叉形的鼠標(biāo)光標(biāo)。這樣，我們就實現(xiàn)了一個簡單的 CSS 樣式放大鏡效果。