前端页面加载由模糊到清晰的实现方案

要实现图片加载时由模糊逐渐变得清晰的效果，可以使用 CSS 和 JavaScript 的结合。这里的思路是：先让图片在加载时模糊显示，等图片完全加载完后，再去掉模糊效果。

1. 使用 CSS 实现模糊效果

我们可以使用 filter: blur() 来为图片添加模糊效果，结合 transition 属性在加载完成时逐渐移除模糊效果。

HTML 示例：

<img src="example.jpg" alt="Example Image" class="lazy-image">

CSS 示例：

/* 初始模糊效果 */
.lazy-image {filter: blur(10px);transition: filter 1s ease; /* 1秒的模糊过渡效果 */opacity: 0.5; /* 可以先显示半透明，过渡到完全清晰 */
}/* 图片加载完成后移除模糊效果 */
.lazy-image.loaded {filter: blur(0