HTML CSS 放大鏡 在網頁制作中，常常需要對圖片進行放大展示。使用HTML和CSS實現一個簡單的放大鏡效果。 首先，在HTML中創建一個div容器用于承載圖片和放大鏡：

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

接著，在CSS中設置容器的寬高、背景圖片以及放大鏡的樣式：

.container {
position: relative;
width: 500px;
height: 500px;
background-image: url("img.jpg");
background-size: cover;
}
.magnifier {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
pointer-events: none;   // 避免遮擋圖片
overflow: hidden;   // 避免圖片溢出
}

然后，使用JavaScript監聽鼠標移動事件來實現放大鏡的效果：

const container = document.querySelector(".container");
const magnifier = document.querySelector(".magnifier");
container.addEventListener("mousemove", (e) =>{
const x = e.pageX - container.offsetLeft;
const y = e.pageY - container.offsetTop;
magnifier.style.left = `${x}px`;
magnifier.style.top = `${y}px`;
magnifier.style.backgroundPosition = `-${x}px -${y}px`;
});

最后，完善CSS細節，例如鼠標樣式、過渡效果等：

.container {
cursor: crosshair;
}
.magnifier {
cursor: zoom-in;
transition: all 0.2s;
}
.magnifier:hover {
width: 300px;
height: 300px;
}

以上就是實現HTML CSS放大鏡的基本代碼，可以根據自己的需求進行修改和優化。