[分享]css3放大镜制作

在网页设计中，放大镜效果是一个比较常见的需求。利用CSS3的技术，我们可以很轻松地制作出一个漂亮的放大镜效果。html: css: .magnifiercontainer { : relati...

在网页设计中，放大镜效果是一个比较常见的需求。利用CSS3的技术，我们可以很轻松地制作出一个漂亮的放大镜效果。

html:
<div class="magnifier-container">
   <img src="example.jpg" class="magnifier-src" />
   <div class="magnifier"></div>
</div>

css:
.magnifier-container {
   position: relative;
   width: 400px;
   height: 400px;
}
.magnifier-src {
   display: block;
   width: 100%;
   height: 100%;
}
.magnifier {
   position: absolute;
   top: 0;
   left: 0;
   width: 200px;
   height: 200px;
   border: 5px solid #333;
   border-radius: 50%;
   box-shadow: 0 0 10px #666;
   opacity: 0;
   pointer-events: none;
}
.magnifier:hover {
   opacity: 1;
   pointer-events: auto;
}
.magnifier:hover::before {
   content: "";
   display: block;
   position: absolute;
   top: -110px;
   left: -110px;
   width: 420px;
   height: 420px;
   border-radius: 50%;
   background-image: url('example.jpg');
   background-repeat: no-repeat;
   background-position: -200px -200px;
   transform: scale(2);
   transform-origin: 50% 50%;
   z-index: -1;
} 

首先，在HTML中我们需要一个包含放大镜的容器，并且在其中添加一个图片元素和一个放大镜元素。接下来在CSS中，设置容器的宽高以及定位方式，让图片元素充满容器。而对于放大镜元素，我们需要利用绝对定位，并且设置宽高，边框样式、圆角以及阴影。需要注意的是，这里的放大镜元素的不透明度应该为0，并且设置pointer-events属性为none，这样才能防止放大镜遮挡图片的点击事件。接下来，我们需要通过:hover伪类来控制放大镜元素的显示，并且设置pointer-events属性为auto。利用:before伪元素在放大镜元素的基础上添加放大图片的效果，需要注意的是，我们需要利用transform来实现放大效果，并且设置transform-origin属性为50% 50%。