CSS3+HTML5实现数据加载效果

本文转载自查看原文 2015-08-31 12:40 1813 Web前端/ HTML5/ H5/ CSS3

CSS3代码：

  1 <style>
  2 @font-face {
  3                 font-family: "font_wrl";
  4                 src: url(img/rtrxnfht.TTF);
  5             }
  6             @keyframes myprogress {
  7                 0% {
  8                     opacity: 0.2;
  9                     border-color: yellowgreen;
 10                     background: yellowgreen;
 11                     width: 0%;
 12                 }
 13                 60% {
 14                     opacity: 0.6;
 15                     border-color: yellowgreen;
 16                     background: yellowgreen;
 17                     width: 60%;
 18                 }
 19                 100% {
 20                     opacity: 1.0;
 21                     border-color: yellowgreen;
 22                     background: yellowgreen;
 23                     width: 100%;
 24                 }
 25             }
 26             @keyframes myTransform {
 27                 0% {
 28                     transform: scaleY(1);
 29                 }
 30                 20% {
 31                     transform: scaleY(2);
 32                 }
 33                 21% {
 34                     transform: scaleY(1);
 35                 }
 36                 100% {
 37                     transform: scaleY(1);
 38                 }
 39             }
 40             * {
 41                 margin: 0;
 42                 padding: 0;
 43             }
 44             #divMain {
 45                 position: fixed;
 46                 background: rgba(0, 0, 0, .45);
 47                 width: 100%;
 48                 height: 100%;
 49             }
 50             ul {
 51                 width: auto;
 52                 position: fixed;
 53                 top: 50%;
 54                 left: 50%;
 55                 margin-left: -22px;
 56             }
 57             ul>li {
 58                 list-style: none;
 59                 margin: auto 2px;
 60                 float: left;
 61                 height: 20px;
 62                 width: 5px;
 63                 background: yellowgreen;
 64                 transform-origin: 50% 70%;
 65             }
 66             li:nth-child(1) {
 67                 animation: myTransform 1.5s ease-in-out 0s infinite backwards;
 68             }
 69             li:nth-child(2) {
 70                 animation: myTransform 1.5s ease-in-out .2s infinite backwards;
 71             }
 72             li:nth-child(3) {
 73                 animation: myTransform 1.5s ease-in-out .4s infinite backwards;
 74             }
 75             li:nth-child(4) {
 76                 animation: myTransform 1.5s ease-in-out .6s infinite backwards;
 77             }
 78             li:nth-child(5) {
 79                 animation: myTransform 1.5s ease-in-out .8s infinite backwards;
 80             }
 81             .loadtext {
 82                 width: 150px;
 83                 color: yellowgreen;
 84                 position: fixed;
 85                 left: 50%;
 86                 margin-left: -60px;
 87                 top: 50%;
 88                 margin-top: 30px;
 89                 text-align: center;
 90                 font-family: "font_wrl";
 91                 letter-spacing: 2px;
 92             }
 93             #myprogress {
 94                 height: 20px;
 95                 border: 1px solid yellowgreen;
 96                 position: fixed;
 97                 bottom: 50px;
 98                 border-radius: 5px;
 99                 background: #9ACD32;
100                 animation: myprogress 5s linear infinite;
101             }
102             #myprogressborder {
103                 height: 20px;
104                 width: 100%;
105                 border: 1px solid yellowgreen;
106                 position: fixed;
107                 bottom: 50px;
108                 border-radius: 20px;
109                 line-height: 20px;
110                 color: #fff;
111                 font-family: "font_wrl";
112                 text-align: center;
113                 box-shadow: 0 0 0.5em #fff;
114             }
115 </style>

View Code

HTML5代码：

 1 <body>
 2         <div style="background: url(img/img_bg.jpg) no-repeat; background-size: cover;height: 100%; width: 100%;display: block;position: absolute;"></div>
 3         <div id="divMain">
 4             <ul>
 5                 <li></li>
 6                 <li></li>
 7                 <li></li>
 8                 <li></li>
 9                 <li></li>
10             </ul>
11             <span class="loadtext">界面加载中...</span>
12 
13             <div id="myprogress">
14             </div>
15             <div id="myprogressborder">
16                 当前进度：100%
17             </div>
18         </div>
19     </body>

View Code

实现效果：（注:进度百分比值变化效果没有实现，具体应用中和后台代码关联）

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 CSS3+HTML5特效1 - 上下滑动效果 CSS3+HTML5特效2 - 翻转效果 CSS3+HTML5特效5 - 震动的文字 CSS3+HTML5特效3 - 纵向无缝滚动 CSS3+HTML5特效4 - 横向无缝滚动 CSS3+HTML5特效6 - 闪烁的文字 css实现加载中的效果让Vs2010支持 Css3+HTML5 纯 CSS + 纯字符实现的 loading 加载效果用HTML+CSS实现--折叠效果