CSS3实现Android4.4加载动画js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3实现Android4.4加载动画js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>CSS3ʵ��Android4.4���ض���</title>
<style>
body { background: #222; }
figure { 
  position: absolute;
  margin: auto;
  top: 0; bottom: 0; left: 0; right: 0;
  width: 6.250em; height: 6.250em;
  animation: rotate 2.4s linear infinite;
}
.white { 
  top: 0; bottom: 0; left: 0; right: 0; 
  background: white; 
  animation: flash 2.4s linear infinite;
  opacity: 0;
}
.dot {
  position: absolute;
  margin: auto;
  width: 2.4em; height: 2.4em;
  border-radius: 100%;
  transition: all 1s ease;
}
.dot:nth-child(2) { top: 0; bottom: 0; left: 0; background: #FF4444; animation: dotsY 2.4s linear infinite; }
.dot:nth-child(3) { left: 0; right: 0; top: 0; background: #FFBB33; animation: dotsX 2.4s linear infinite; }
.dot:nth-child(4) { top: 0; bottom: 0; right: 0; background: #99CC00; animation: dotsY 2.4s linear infinite; }
.dot:nth-child(5) { left: 0; right: 0; bottom: 0; background: #33B5E5; animation: dotsX 2.4s linear infinite; }

@keyframes rotate {
  0% { transform: rotate( 0 ); }
  10% { width: 6.250em; height: 6.250em; }
  66% { width: 2.4em; height: 2.4em; }
  100%{ transform: rotate(360deg); width: 6.250em; height: 6.250em; }
}

@keyframes dotsY {
  66% { opacity: .1; width: 2.4em; }
  77%{ opacity: 1; width: 0; }
}
@keyframes dotsX {
  66% { opacity: .1; height: 2.4em;}
  77%{ opacity: 1; height: 0; }
}

@keyframes flash {
  33% { opacity: 0; border-radius: 0%; }
  55%{ opacity: .6; border-radius: 100%; }
  66%{ opacity: 0; }
}

</style>

<script src="js/prefixfree.min.js"></script>

</head>

<body>

  <figure>
    <div class="dot white"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</figure>
</body>
</html>

CSS代码(style.css):

body{background:#222;}
figure{position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;width:6.250em;height:6.250em;animation:rotate 2.4s linear infinite;}
.white{top:0;bottom:0;left:0;right:0;background:white;animation:flash 2.4s linear infinite;opacity:0;}
.dot{position:absolute;margin:auto;width:2.4em;height:2.4em;border-radius:100%;transition:all 1s ease;}
.dot:nth-child(2){top:0;bottom:0;left:0;background:#FF4444;animation:dotsY 2.4s linear infinite;}
.dot:nth-child(3){left:0;right:0;top:0;background:#FFBB33;animation:dotsX 2.4s linear infinite;}
.dot:nth-child(4){top:0;bottom:0;right:0;background:#99CC00;animation:dotsY 2.4s linear infinite;}
.dot:nth-child(5){left:0;right:0;bottom:0;background:#33B5E5;animation:dotsX 2.4s linear infinite;}
@keyframes rotate{0%{transform:rotate( 0 );}
10%{width:6.250em;height:6.250em;}
66%{width:2.4em;height:2.4em;}
100%{transform:rotate(360deg);width:6.250em;height:6.250em;}
}
@keyframes dotsY{66%{opacity:.1;width:2.4em;}
77%{opacity:1;width:0;}
}
@keyframes dotsX{66%{opacity:.1;height:2.4em;}
77%{opacity:1;height:0;}
}
@keyframes flash{33%{opacity:0;border-radius:0%;}
55%{opacity:.6;border-radius:100%;}
66%{opacity:0;}
}

附件:下载该文件资源,减少时间成本(增值服务)