使用CSS3实现图片放大镜动画效果

在前端开发中，使用CSS3实现图片放大镜动画效果可以通过结合transform、transition以及:hover伪类选择器来完成。以下是一个简单的示例：

HTML结构：

<div class="image-container">
  <img src="your-image.jpg" alt="Your Image" class="image">
  <div class="magnifier"></div>
</div>

在这个结构中，.image-container是包含图片和放大镜的容器，.image是你要放大的图片，而.magnifier是放大镜元素。
2. CSS样式：

.image-container {
  position: relative;
  width: 300px; /* 图片宽度 */
  height: 200px; /* 图片高度 */
  overflow: hidden; /* 隐藏超出容器的部分 */
}

.image {
  width: 100%;
  height: auto;
  display: block;
}

.magnifier {
  position: absolute;
  width: 100px; /* 放大镜宽度 */
  height: 100px; /* 放大镜高度 */
  border-radius: 50%; /* 圆形放大镜 */
  border: 2px solid #000; /* 放大镜边框 */
  background: rgba(255, 255, 255, 0.5); /* 放大镜背景，半透明 */
  cursor: none; /* 移除鼠标样式 */
  left: 50%; /* 水平居中 */
  top: 50%; /* 垂直居中 */
  transform: translate(-50%, -50%) scale(1); /* 初始位置和大小 */
  transition: transform 0.3s ease-in-out; /* 平滑过渡效果 */
  z-index: 1000; /* 确保放大镜在图片上方 */
}

.image-container:hover .magnifier {
  transform: translate(-50%, -50%) scale(1.5); /* 鼠标悬停时放大 */
}

/* 使用::before和::after伪元素创建放大的图片效果 */
.magnifier::before,
.magnifier::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}

.magnifier::before {
  border: 1px solid #000; /* 放大图片的边框 */
  left: 50%;
  top: 50%;
  width: 200%; /* 放大图片的宽度，相对于放大镜 */
  height: 200%; /* 放大图片的高度，相对于放大镜 */
  transform: translate(-50%, -50%); /* 居中 */
  z-index: -1; /* 确保在放大镜下方 */
}

.magnifier::after {
  left: 0;
  top: 0;
  width: 100%; /* 与.image-container相同 */
  height: 100%; /* 与.image-container相同 */
  background: url('your-image.jpg') no-repeat; /* 与原图相同的背景 */
  background-size: 200% 200%; /* 背景图片放大两倍 */
  background-position: center; /* 背景图片居中 */
  z-index: -2; /* 确保在放大镜和放大图片的边框下方 */
  transform: scale(1); /* 初始大小 */
  transition: transform 0.3s ease-in-out; /* 平滑过渡效果 */
}

.image-container:hover .magnifier::after {
  transform: scale(2); /* 鼠标悬停时放大 */
}