css 模糊动画 |前端css手机

.blur {
filter: blur(0px);
transition: filter 2s;
}
.blur:hover {
filter: blur(5px);
}

首先，大家需要使用CSS中的滤镜属性filter来实现模糊效果。在上面的代码中，大家创建了一个.blur的CSS类，并将它的初始模糊值设置为0px。

接着，大家使用CSS中的过渡属性transition来定义模糊值的过渡效果。在上述代码中，大家将过渡时间设置为2秒。

最后，大家使用:hover选择器来表示当鼠标移到元素上时应该发生什么，也就是模糊值应该变为5px。

这样，当用户将鼠标移动到模糊元素上时，模糊值将从0px渐变到5px，这就是大家的模糊动画效果。除此之外，filter属性还可以实现其他的滤镜效果，如色调、对比度、亮度等。

总之，通过使用CSS的filter属性和transition属性，大家可以轻松地实现各种动画效果，提升网站的用户体验和美观度。