css3悬停效果代码

CSS3悬停效果可以为网站元素添加一些互动性和动态效果，提升用户体验。以下是一些常用的CSS3悬停效果代码：

/* 放大效果 */
.hover-zoom {
  transform: scale(1);
  transition: transform .3s ease;
}
.hover-zoom:hover {
  transform: scale(1.1);
}

/* 透明度变化 */
.hover-opacity {
  opacity: 1;
  transition: opacity .3s ease;
}
.hover-opacity:hover {
  opacity: 0.7;
}

/* 文字颜色变化 */
.hover-text-color {
  color: #333;
  transition: color .3s ease;
}
.hover-text-color:hover {
  color: #f90;
}

/* 边框变化 */
.hover-border {
  border: 1px solid #ccc;
  transition: border .3s ease;
}
.hover-border:hover {
  border: 1px solid #f90;
}

/* 背景颜色变化 */
.hover-background {
  background-color: #fff;
  transition: background-color .3s ease;
}
.hover-background:hover {
  background-color: #f90;
}

以上代码都是利用CSS3的transition属性实现动态效果，而悬停效果则是利用:hover伪类触发。通过使用不同的CSS属性和值，可以实现更多种类的悬停效果。