css 实现的loading页面等待效果

来源：互联网发布：淘宝店铺装修价格表编辑：程序博客网时间：2024/05/21 11:25

有些页面加载起来比较慢，为了加强用户体验效果，所以一般都会做一个页面加载等待的提示，页面加载完成后消失。下面是用CSS实现的一个简单的页面加载等待效果，大家可以参考：

<span style="font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>无标题文档</title>  <style type="text/css">  .loading{      width:160px;      height:56px;      position: absolute;      top:50%;      left:50%;      line-height:56px;      color:#fff;      padding-left:60px;      font-size:15px;      background: #000 url(images/loader.gif) no-repeat 10px 50%;      opacity: 0.7;      z-index:9999;      -moz-border-radius:20px;      -webkit-border-radius:20px;      border-radius:20px;      filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);  }  </style>  </head>    <body>  <div id="loading" class="loading">Loading pages...</div>  </body>  </html></span>

css中的图片在下面：

整个效果图如下：

转载自：http://blog.csdn.net/playboyanta123/article/details/8183731

0 0