css样式写网页的遮罩层提示加载中_好看的加载请样式-CSDN博客

本文介绍了一种简单的网页加载遮罩层实现方法，包括HTML结构与CSS样式设置。通过一个具体的示例展示了如何使用固定的灰色遮罩层和带有加载动效的提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写页面经常会遇到写网页的遮罩层提示我加载中

这是自己写的一个例子记录一下以便查看

如图

HTML 的源代码

//加载的gif图片和文字 begin

<div class="liadloging">
   <div class="ldl_Conten">
       <img src="../images/loading-lo.gif"/>
        <p>加载中请稍后......</p>
    </div>
</div>

//加载的gif图片和文字 end

!--灰色遮罩层 begin-->

CSS样式

/*遮罩层 begin 2016-6-14 13:22:20*/
.floatLayer{ width:100%; height:100%; position:fixed; background:#000; z-index:9990; top:0px; left:0px;filter:alpha(Opacity=50);-moz-opacity:0.50;opacity: 0.50;}
.liadloging{ width:100%; height:auto; position:absolute; top:45%; left:auto; z-index:9995; }
.ldl_Conten{ width:500px; height:100px; line-height:100px; overflow:hidden; text-align:center; }
.ldl_Conten img{ width:60px; height:20px; line-height:100px;display:block; float:left; margin:39px 5px; background-size:60px 20px; filter:chroma(color=#ffffff);}
.ldl_Conten p{ width:auto; height:auto; font-size:20px; height:100px; line-height:100px; color:#000; display:block; float:left;}
/*遮罩层 begin*/

想要学习更多加载的样式可以连接：http://codepen.io/search/pens?q=load&limit=all&type=type-pens