[分享]css3放大镜晃动

CSS3放大镜晃动是一种很有趣的效果，通过CSS3的动画和变形属性可以实现一个放大镜在页面上慢慢晃动的效果。.zoom { : relative; / 定位父元素，保证子元素可以相对于父元素定位 / ...

CSS3放大镜晃动是一种很有趣的效果，通过CSS3的动画和变形属性可以实现一个放大镜在页面上慢慢晃动的效果。

.zoom {
  position: relative; /* 定位父元素，保证子元素可以相对于父元素定位 */
  width: 300px;
}

.zoom img {
  display: block; /* 使图片变成块级元素，方便设置宽高 */
  max-width: 100%; /* 确保图片不会超过父元素 */
}

.zoom .zoom-lens {
  position: absolute; /* 相对于父元素绝对定位 */
  border: 1px solid #d4d4d4; /* 放大镜框样式 */
  width: 100px;
  height: 100px;
  transform: rotate(0deg); /* 默认不旋转 */
  transition: transform 0.5s ease-out; /* 动画过渡效果 */
  cursor: move; /* 鼠标指针样式为移动 */
}

.zoom:hover .zoom-lens {
  transform: rotate(10deg); /* 鼠标滑过时，放大镜框有晃动效果 */
} 

以上代码演示了一个简单的放大镜效果，只需要对需要放大区域设置一个指定大小和边框的元素，并通过CSS3的旋转属性让其在鼠标悬停时有晃动的效果。

通过CSS3放大镜晃动效果，可以让页面更加生动有趣，并提升用户体验。