Chinaunix首页 | 论坛 | 博客

Web world

首页　| 　博文目录　| 　关于我

cici0208

  • 博客访问： 486845
  • 博文数量： 226
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 2111
  • 用 户 组： 普通用户
  • 注册时间： 2014-06-20 09:02
个人简介

web web web

文章分类

全部博文（226）

文章存档

2020年（2）

2019年（1）

2018年（3）

2017年（26）

2016年（57）

2015年（60）

2014年（77）

我的朋友
最近访客
推荐博文
相关博文
css之Loading。。。

分类： Web开发

2015-04-07 12:16:07


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.  
  6. <style type="text/css">
  7.  #cc{
  8.  text-align:center;
  9.  margin:0 auto;
  10.  width:400px;
  11.  height:100px;
  12.  

  14.  }
  15.  
  16. #bb{
  17.  position: absolute;
  18.  width:400px;
  19.  height:200px;
  20.  left:50%;
  21.  top:50%;
  22.  margin-left:-200px;
  23.  margin-top:-100px;
  24.  
  25. }
  26. #tip{
  27.  position: absolute;
  28.  left:50%;
  29.  top:50%;
  30.  margin-left:-100px;
  31.  margin-top:-200px;
  32.  
  33. }

  35. .spinner {
  36.   margin: 20px auto;
  37.   width: 40px;
  38.   height: 40px;
  39.   position: relative;

  41. }
  42.  
  43. .container1 > div, .container2 > div, .container3 > div {
  44.   width: 12px;
  45.   height: 12px;
  46.   background-color: #fff;
  47.  
  48.   border-radius: 100%;
  49.   position: absolute;
  50.   -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  51.   animation: bouncedelay 1.2s infinite ease-in-out;
  52.   -webkit-animation-fill-mode: both;
  53.   animation-fill-mode: both;
  54. }
  55.  
  56. .spinner .spinner-container {
  57.   position: absolute;
  58.   width: 100%;
  59.   height: 100%;
  60. }
  61.  
  62. .container2 {
  63.   -webkit-transform: rotateZ(45deg);
  64.   transform: rotateZ(45deg);
  65. }
  66.  
  67. .container3 {
  68.   -webkit-transform: rotateZ(90deg);
  69.   transform: rotateZ(90deg);
  70. }
  71.  
  72. .circle1 { top: 0; left: 0; }
  73. .circle2 { top: 0; right: 0; }
  74. .circle3 { right: 0; bottom: 0; }
  75. .circle4 { left: 0; bottom: 0; }
  76.  
  77. .container2 .circle1 {
  78.   -webkit-animation-delay: -1.1s;
  79.   animation-delay: -1.1s;
  80. }
  81.  
  82. .container3 .circle1 {
  83.   -webkit-animation-delay: -1.0s;
  84.   animation-delay: -1.0s;
  85. }
  86.  
  87. .container1 .circle2 {
  88.   -webkit-animation-delay: -0.9s;
  89.   animation-delay: -0.9s;
  90. }
  91.  
  92. .container2 .circle2 {
  93.   -webkit-animation-delay: -0.8s;
  94.   animation-delay: -0.8s;
  95. }
  96.  
  97. .container3 .circle2 {
  98.   -webkit-animation-delay: -0.7s;
  99.   animation-delay: -0.7s;
  100. }
  101.  
  102. .container1 .circle3 {
  103.   -webkit-animation-delay: -0.6s;
  104.   animation-delay: -0.6s;
  105. }
  106.  
  107. .container2 .circle3 {
  108.   -webkit-animation-delay: -0.5s;
  109.   animation-delay: -0.5s;
  110. }
  111.  
  112. .container3 .circle3 {
  113.   -webkit-animation-delay: -0.4s;
  114.   animation-delay: -0.4s;
  115. }
  116.  
  117. .container1 .circle4 {
  118.   -webkit-animation-delay: -0.3s;
  119.   animation-delay: -0.3s;
  120. }
  121.  
  122. .container2 .circle4 {
  123.   -webkit-animation-delay: -0.2s;
  124.   animation-delay: -0.2s;
  125. }
  126.  
  127. .container3 .circle4 {
  128.   -webkit-animation-delay: -0.1s;
  129.   animation-delay: -0.1s;
  130. }
  131.  
  132. @-webkit-keyframes bouncedelay {
  133.   0%, 80%, 100% { -webkit-transform: scale(0.0) }
  134.   40% { -webkit-transform: scale(1.0) }
  135. }
  136.  
  137. @keyframes bouncedelay {
  138.   0%, 80%, 100% {
  139.     transform: scale(0.0);
  140.     -webkit-transform: scale(0.0);
  141.   } 40% {
  142.     transform: scale(1.0);
  143.     -webkit-transform: scale(1.0);
  144.   }
  145. }
  146. </style>
  147.   
  148. </head>
  149. <body style="background:#bfbfbf;">
  150.  
  151. <div style="height: 100%; width: 100%">
  152.  <div id="bb">
  153.   <div class="spinner">
  154.   <div class="spinner-container container1">
  155.    <div class="circle1" ></div>
  156.    <div class="circle2" ></div>
  157.    <div class="circle3" ></div>
  158.    <div class="circle4" ></div>
  159.   </div>
  160.   <div class="spinner-container container2" >
  161.    <div class="circle1" ></div>
  162.    <div class="circle2" ></div>
  163.    <div class="circle3" ></div>
  164.    <div class="circle4" ></div>
  165.   </div>
  166.   <div class="spinner-container container3">
  167.    <div class="circle1" ></div>
  168.    <div class="circle2" ></div>
  169.    <div class="circle3" ></div>
  170.    <div class="circle4" ></div>
  171.   </div>
  172.  </div>
  173.  <div id="cc">Finding...</div>
  174.  </div>
  175. </div>


  178. </body>
  179. </html>



 

阅读(576) | 评论(0) | 转发(0) |
0

上一篇：JavaScript调试技巧之console.log()详解

下一篇：解决拖动时出现被选中的蓝色块

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6