今天我們來(lái)學(xué)習(xí)一下如何制作一個(gè)圖片放大鏡效果。 首先我們需要用HTML來(lái)準(zhǔn)備我們的圖片和容器。

<div class="container">
<img src="image.jpg">
<div class="zoom"></div>
</div>

我們創(chuàng)建了一個(gè)容器，內(nèi)部包含一張圖片和一個(gè)用于放大的盒子。 接下來(lái)，我們要用CSS來(lái)實(shí)現(xiàn)放大鏡的效果。我們需要兩個(gè)容器，一個(gè)用于定位原圖和放大區(qū)域，另一個(gè)用于包含放大圖像。我們可以用媒體查詢(xún)來(lái)設(shè)置容器的寬度，同時(shí)在hover時(shí)設(shè)置放大鏡容器的可見(jiàn)性。

.container {
position: relative;
width: 500px;
}
.zoom {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3);
visibility: hidden;
pointer-events: none;
}
.container:hover .zoom {
visibility: visible;
}
.zoom-image {
position: absolute;
top: 0;
left: 100%;
transform: translateX(-50%);
width: 400px;
height: 400px;
border-radius: 50%;
overflow: hidden;
z-index: 2;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
@media (max-width: 600px) {
.container {
width: 100%;
}
}

我們可以看到，我們用偽元素`:before`創(chuàng)建了一個(gè)放大鏡，并設(shè)置了樣式，將它的寬度和高度設(shè)置成了200px，并將border-radius設(shè)置為50% 使其變成一個(gè)圓形，同時(shí)，我們還將背景顏色設(shè)置為半透明。 我們同樣設(shè)置了.zoom-image的樣式，將其的寬度和高度設(shè)置為400px，并將border-radius也設(shè)置為50%，同時(shí)overflow為hidden以便我們只能看到800*800像素的區(qū)域。這里我們?cè)O(shè)置了一個(gè)z-index的優(yōu)先級(jí)。 在手機(jī)端，我們將容器的寬度設(shè)置為100%。 代碼如上！