CSS實現放大鏡效果可以讓網站更加美觀，也能使用戶更加方便地觀察圖片的細節，下面我們來簡單介紹一下如何實現。

首先，我們需要在HTML中設置一個容器用于存放圖片和放大鏡，代碼如下：

<div class="container">
<img src="example.jpg" alt="example">
<div class="magnifier"></div>
</div>

其中，container為圖片容器，magnifier為放大鏡容器，兩個容器使用CSS進行定位，如下：

.container {
position: relative;
}
.magnifier {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
border: 2px solid #666;
cursor: move;
display: none;
}

對于圖片容器，我們只需要將它設置為相對定位即可，而放大鏡容器需要設置為絕對定位，并給予它一些基本屬性，如寬度、高度、圓角、背景顏色、邊框等。其中，border-radius屬性用來設置圓形的邊框，rgba屬性用來設置背景顏色與透明度，cursor屬性用來將鼠標的形狀設置為move。

然后，我們需要使用JavaScript來實現當鼠標在圖片上移動時，放大鏡也隨之移動，并顯示放大效果。代碼如下：

const container = document.querySelector('.container')
const magnifier = document.querySelector('.magnifier')
const img = document.querySelector('img')
container.addEventListener('mousemove', (e) =>{
magnifier.style.display = 'block'
const x = e.clientX - container.getBoundingClientRect().left - magnifier.offsetWidth / 2
const y = e.clientY - container.getBoundingClientRect().top - magnifier.offsetHeight / 2
if (x< 0) {
magnifier.style.left = '0'
} else if (x >container.offsetWidth - magnifier.offsetWidth) {
magnifier.style.left = container.offsetWidth - magnifier.offsetWidth + 'px'
} else {
magnifier.style.left = x + 'px'
}
if (y< 0) {
magnifier.style.top = '0'
} else if (y >container.offsetHeight - magnifier.offsetHeight) {
magnifier.style.top = container.offsetHeight - magnifier.offsetHeight + 'px'
} else {
magnifier.style.top = y + 'px'
}
const bgX = -magnifier.offsetLeft * (img.offsetWidth / magnifier.offsetWidth)
const bgY = -magnifier.offsetTop * (img.offsetHeight / magnifier.offsetHeight)
img.style.backgroundPosition = `${bgX}px ${bgY}px`
})
container.addEventListener('mouseleave', () =>{
magnifier.style.display = 'none'
})

代碼中，我們首先獲取了HTML元素，然后使用addEventListener方法監聽鼠標移動事件。對于放大鏡的位置，我們需要計算鼠標相對于容器的偏移量，并將放大鏡的位置設置為鼠標位置減去放大鏡本身寬度的一半。但是由于放大鏡可能會超出容器的邊界，我們需要添加一些判斷語句來處理這種情況。對于放大效果，我們需要根據放大鏡的位置計算出對應的圖片背景位置，并將其設置為圖片的backgroundPosition屬性值。最后，在鼠標移出圖片容器后，我們需要將放大鏡隱藏。

以上就是CSS實現放大鏡效果的簡單介紹，希望對大家有所幫助。