[分享]css3悬停效果图

在网页设计中，鼠标悬停效果是一个常见的交互特效。CSS3中提供了许多方法来实现不同的悬停效果。下面我们来看一些常见的CSS3悬停效果图。/ 图片变灰效果 / img:hover { webkitfil...

在网页设计中，鼠标悬停效果是一个常见的交互特效。CSS3中提供了许多方法来实现不同的悬停效果。

下面我们来看一些常见的CSS3悬停效果图。

/* 图片变灰效果 */
img:hover {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

/* 文字变色效果 */
h2:hover {
  color: #FF6600; /* 将文字颜色变为橙色 */
}

/* 边框变宽效果 */
button:hover {
  border-width: 3px;
}

/* 渐变背景色效果 */
div:hover {
  background: linear-gradient(#FFB6C1, #FF69B4); /* 让背景色从粉色渐变到深粉色 */
}

/* 按钮放大效果 */
button:hover {
  transform: scale(1.1); /* 将按钮放大10% */
} 

以上是几个常见的CSS3悬停效果图案例，可以通过CSS3的样式来增加页面的交互性，提高用户体验。