[分享]css3悬停效果有哪些

CSS3悬停效果是指当鼠标悬停在一个元素上时，元素的样式会发生变化，从而实现交互动效。下面介绍一些常见的CSS3悬停效果。 / 图片阴影 / img:hover { boxshadow: 0 5px ...

CSS3悬停效果是指当鼠标悬停在一个元素上时，元素的样式会发生变化，从而实现交互动效。下面介绍一些常见的CSS3悬停效果。

/* 图片阴影 */
img:hover {
   box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
}

/* 文字阴影 */
h1:hover {
   text-shadow: 2px 2px 5px rgba(0, 0, 0, .5);
}

/* 渐变背景色 */
button:hover {
   background: linear-gradient(to right, #ff9900, #ff7f50);
}

/* 文字变色 */
a:hover {
   color: #ff69b4;
}

/* 文字放大 */
span:hover {
   font-size: 1.2em;
} 

上面的代码演示了一些基本的悬停效果，但实际上还有更复杂、更炫酷的效果。如通过CSS3动画实现元素位移、缩放、旋转等效果。需要注意的是，在实现悬停效果时，应当考虑到使用者的体验，不要使用过于炫酷的效果影响用户使用体验。