[分享]css3图片悬停效果

CSS3图片悬停效果是网页设计中很重要的一部分。它可以给图片增加动态效果和美观度，提升页面的视觉效果和用户体验。下面为大家介绍几种常见的CSS3图片悬停效果。/ 图片放大 / img:hover { ...

CSS3图片悬停效果是网页设计中很重要的一部分。它可以给图片增加动态效果和美观度，提升页面的视觉效果和用户体验。下面为大家介绍几种常见的CSS3图片悬停效果。

/* 图片放大 */
img:hover {
  transform: scale(1.1); /* 缩放比例为1.1倍 */
}

/* 图片透明度变化 */
img:hover {
  opacity: 0.7; /* 透明度为0.7 */
}

/* 图片旋转 */
img:hover {
  transform: rotate(45deg); /* 顺时针旋转45度 */
}

/* 图片变换 */
img:hover {
  transform: translateX(20px) translateY(-20px); /* 水平方向平移20px，竖直方向平移-20px */
}

/* 边框变化 */
img:hover {
  border: 2px solid #ff0000; /* 边框宽度为2px，红色 */
} 

以上几种效果只是CSS3图片悬停效果中的一部分。我们可以通过不同的CSS属性和参数进行组合，达到更加优美的效果。同时，注意要考虑到网页的性能问题，避免加载时过度耗费资源。