前端页面加载由模糊到清晰的实现方案
要实现图片加载时由模糊逐渐变得清晰的效果,可以使用 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