📅 最后修改于: 2023-12-03 15:39:37.374000 🧑 作者: Mango
悬停时模糊效果是一种常见的用户交互效果，它使得用户可以更加明显地感受到鼠标指向某一元素时的变化，从而提高页面的可交互性与用户体验。当鼠标指向一个元素时，该元素周围的图像就会模糊显示，凸显出该元素的位置。
下面是一个简单的悬停时模糊效果实现的代码示例：
<!DOCTYPE html>
<html>
<head>
<title>悬停时模糊图像</title>
<style>
.blur {
filter: blur(5px); /* 设置模糊效果的程度 */
transition: filter 0.5s; /* 设置过渡效果的时间 */
}
.blur:hover {
filter: blur(0); /* 鼠标悬停时取消模糊效果 */
}
</style>
</head>
<body>
<img src="image.jpg" alt="图片" class="blur">
</body>
</html>
该示例利用CSS3的filter属性实现了悬停时模糊的效果。在默认状态下，图片会被设置成blur类，该类下的filter: blur(5px)设置了图片的模糊程度。当鼠标悬停在图片上时，blur类被取消，图片的模糊效果被取消，从而显示出清晰的图像。
此外，该示例中还用到了CSS3的transition属性来实现过渡效果，使得当鼠标悬停时，图片的模糊效果会平滑过渡，而不是突变。
总之，悬停时模糊图像是一种简单实用的用户交互效果，能够增强页面的可交互性和用户体验。