前端小项目7 # BlurryLoading 背景图模糊加载，文字逐渐透明

知识点

• 文字垂直水平居中
• background 属性
• 模糊效果
• 透明效果
• 原生JavaScript获取DOM
• 定时器

介绍

模糊的背景图上有当前的背景图加载进度的文字“0%”，随着背景图越来越清晰，加载进度逐渐接近“100%”，进度文字样式越来越透明。

代码

html:

<div class="content"></div>
<p class="loading-text"></p>

css: