鼠标悬停后图片模糊
HTML代码:
<img class="blur-image" src="https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2023/10/19/094451_202824_0.webp" alt="Your Image">
CSS代码:
<!-------------鼠标悬停图片变模糊----------------> <style> .blur-image { filter: blur(0); /* 初始模糊程度为0 */ transition: filter 0.5s; /* 添加过渡效果 */ }.blur-image:hover { filter: blur(10px); /* 鼠标悬停时模糊程度为10px */ } </style> <!-------------鼠标悬停图片变模糊---------------->