css3伪放大镜效果 |css滤镜会影响文本

css写春晓，css代码转html，css对登录界面美化，html5 css 导航，css如何修改图片间距，改变css中属性的值，css滤镜会影响文本 css3伪放大镜效果 |css滤镜会影响文本

/* HTML部分 */
<div class="img-container">
<img src="xxx.jpg">
<div class="magnify-glass"></div>
</div>
/* CSS部分 */
/* 图片容器，需设置宽度和高度 */
.img-container {
position: relative;
width: 400px;
height: 400px;
}
/* 图片 */
.img-container img {
width: 100%;
height: auto;
}
/* 放大镜 */
.img-container .magnify-glass {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid #333;
opacity: 0;
background-color: #fff;
}
/* 鼠标移动到图片上，显示放大镜 */
.img-container:hover .magnify-glass {
opacity: 1;
}
/* 移动放大镜位置 */
.img-container:hover .magnify-glass {
background-image: url(xxx.jpg);
background-size: 800px 800px;
background-repeat: no-repeat;
background-position: -100px -100px; /* 根据鼠标位置调整 */
transform: scale(2); /* 图片放大2倍 */
}

通过以上代码，大家就实现了一种通过CSS3实现的伪放大镜效果。用户鼠标移动到图片上时，会显示放大镜，移动鼠标时，放大镜会随着鼠标移动而改变位置，并且会将鼠标所在的位置进行放大展示。