1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>CSS3 loading效果</title>
  5.         <meta charset="utf-8" />
  6.         <style type="text/css" media="screen">
  7.             * {
  8.                 margin: 0;
  9.                 padding: 0;
  10.             }
  11.             #loading {
  12.                 position: absolute;
  13.                 left: 600px;
  14.                 top: 147px;
  15.                 color: #666;
  16.             }
  17.             #loading span{
  18.                 display: block;
  19.                 position: absolute;
  20.                 top: 32px;
  21.                 height: 10px;
  22.                 width: 10px;
  23.                 border: 1px solid #999;
  24.                 background-color: #CCC;
  25.                 -webkit-animation-iteration-count: infinite;
  26.                 -webkit-animation-duration: 2.5s;
  27.             }
  28.             #loading span:nth-of-type(1){
  29.                 left: 0;
  30.                 -webkit-animation-name: animationloading1;
  31.             }
  32.             #loading span:nth-of-type(2){
  33.                 left: 20px;
  34.                 -webkit-animation-name: animationloading2;
  35.             }
  36.             #loading span:nth-of-type(3){
  37.                 left: 40px;
  38.                 -webkit-animation-name: animationloading3;
  39.             }
  40.             #loading span:nth-of-type(4){
  41.                 left: 60px;
  42.                 -webkit-animation-name: animationloading4;
  43.             }
  44.             #loading span:nth-of-type(5){
  45.                 left: 80px;
  46.                 -webkit-animation-name: animationloading5;
  47.             }
  48.             @-webkit-keyframes animationloading1{
  49.                 0%{
  50.                     -webkit-transform: scale(1);
  51.                     background-color: #CCC;
  52.                 }
  53.                 20%{
  54.                     -webkit-transform: scale(1.5);
  55.                     background-color: #999;
  56.                 }
  57.                 21%{
  58.                     -webkit-transform: scale(1);
  59.                     background-color: #CCC;
  60.                 }
  61.                 100%{
  62.                     -webkit-transform: scale(1);
  63.                     background-color: #CCC;
  64.                 }
  65.             }
  66.             @-webkit-keyframes animationloading2{
  67.                 0%{
  68.                     -webkit-transform: scale(1);
  69.                     background-color: #CCC;
  70.                 }
  71.                 20%{
  72.                     -webkit-transform: scale(1);
  73.                     background-color: #CCC;
  74.                 }
  75.                 40%{
  76.                     -webkit-transform: scale(1.5);
  77.                     background-color: #999;
  78.                 }
  79.                 41%{
  80.                     -webkit-transform: scale(1);
  81.                     background-color: #CCC;
  82.                 }
  83.                 100%{
  84.                     -webkit-transform: scale(1);
  85.                     background-color: #CCC;
  86.                 }
  87.             }
  88.             @-webkit-keyframes animationloading3{
  89.                 0%{
  90.                     -webkit-transform: scale(1);
  91.                     background-color: #CCC;
  92.                 }
  93.                 40%{
  94.                     -webkit-transform: scale(1);
  95.                     background-color: #CCC;
  96.                 }
  97.                 60%{
  98.                     -webkit-transform: scale(1.5);
  99.                     background-color: #999;
  100.                 }
  101.                 61%{
  102.                     -webkit-transform: scale(1);
  103.                     background-color: #CCC;
  104.                 }
  105.                 100%{
  106.                     -webkit-transform: scale(1);
  107.                     background-color: #CCC;
  108.                 }
  109.             }
  110.             @-webkit-keyframes animationloading4{
  111.                 0%{
  112.                     -webkit-transform: scale(1);
  113.                     background-color: #CCC;
  114.                 }
  115.                 60%{
  116.                     -webkit-transform: scale(1);
  117.                     background-color: #CCC;
  118.                 }
  119.                 80%{
  120.                     -webkit-transform: scale(1.5);
  121.                     background-color: #999;
  122.                 }
  123.                 81%{
  124.                     -webkit-transform: scale(1);
  125.                     background-color: #CCC;
  126.                 }
  127.                 100%{
  128.                     -webkit-transform: scale(1);
  129.                     background-color: #CCC;
  130.                 }
  131.             }
  132.             @-webkit-keyframes animationloading5{
  133.                 0%{
  134.                     -webkit-transform: scale(1);
  135.                     background-color: #CCC;
  136.                 }
  137.                 80%{
  138.                     -webkit-transform: scale(1);
  139.                     background-color: #CCC;
  140.                 }
  141.                 100%{
  142.                     -webkit-transform: scale(1.5);
  143.                     background-color: #999;
  144.                 }
  145.             }
  146.         </style>
  147.     </head>
  148.     <body>
  149.         <div id="loading">
  150.             <h3>正在转入<a href="http://www.baidu.com">CSS3持续一组连贯动画</a> 加载中……请稍候进入百度搜索</h3>
  151.             <span></span>
  152.             <span></span>
  153.             <span></span>
  154.             <span></span>
  155.             <span></span>
  156.         </div>
  157.     </body>
  158. </html>

css3的loadding效果的更多相关文章

  1. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  2. css3的transition效果和transfor效果

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. css3幻灯片换位效果

    <title>css3幻灯片换位效果</title> <style type="text/css">  .flowGallery {width: ...

  4. 第八十节，CSS3边框图片效果

    CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释     CSS3 ...

  5. html+css3实现长方体效果

    网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看.                   2017-07-25         21:30:23 h ...

  6. Css3实现波浪效果3-静态波纹

    一.外框宽度等比例3个椭圆拼合 .container { position: absolute; width: 400px; height: 200px; border: 5px solid rgb( ...

  7. 测试css3的动画效果在display:none的时候不耗费性能

    也许你也有这个疑惑,动画一直在播放,那它不显示出来的时候也一直在播放的话,那是否一直占用资源呢? <!doctype html> <html> <head> < ...

  8. css3写下雨效果

    css3写下雨效果<pre><div class="xiayuxiaoguo"></div></pre> <pre>.x ...

  9. CSS3 3D立方体效果－transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

随机推荐

  1. C语言实现OOP 版本2

    写版本2的原因,还是发现在不同的具体图形模块里发现了重复的release代码,这是坏味道,所以还是决定消除这些重复代码,DRY! shape.h #ifndef SHAPE_H #define SHA ...

  2. CloudStack cloud数据库op_host_capacity表type与控制板上的内容的对应关系

    listCapacity: type 名称 0 内存 1 CPU 3 主存储 4 公用IP地址 5 管理类IP地址 6 辅助存储 7 VLAN 9 本地存储 ViewResponseHelper.ja ...

  3. 2015第14周五Tomcat版本

    首先看tomcat官方文档,列出的不同版本的主要差别: Servlet Spec JSP Spec EL Spec WebSocket Spec Apache Tomcat version Actua ...

  4. MySQL存储过程事务处理

    BEGIN ; ; START TRANSACTION; #这边放sql语句,涉及到的表必须都为InnoDB THEN ROLLBACK; ELSE COMMIT; END IF; END 转自:ht ...

  5. PHP设计模式笔记二：面向对象 -- Rango韩老师 http://www.imooc.com/learn/236

    SPL标准库的使用 SPL是用于解决典型问题(standard problems)的一组接口与类的集合. 1.SPL提供了很多数据结构类,如SplStack.SqlQueue.SqlHeap.SplF ...

  6. iOS开发- 界面传值(1)-通知模式(广播)

    之后的几篇博客, 记录下不同界面间传值的经常使用办法. 这篇文章记录广播的方式. iOS的设计模式中,通知模式也是当中重要的模式之中的一个,Notification直译为通知,事实上本人认为叫做广播模 ...

  7. sqlserver中几种典型的等待

    为了准备今年的双11很久没有更新blog,在最近的几次sqlserver问题的排查中,总结了sqlserver几种典型的等待类型,类似于oracle中的等待事件,如果看到这样的等待类型时候能够迅速定位 ...

  8. 实现Android操作系统11种传感器介绍

    在Android2.3 gingerbread系统中,google提供了11种传感器供应用层使用. #define SENSOR_TYPE_ACCELEROMETER 1 //加速度 #define ...

  9. Linux文件权限管理

    一.设置文件所属的用户以及所属的组(chown,chgrp) chgrp用来更改文件的组拥有者,其一般格式为:chgrp [option] group file(1)把文件test的组拥有者改为zfs ...

  10. MSN在Win7下80072f0d错误解决

    近期电脑(笔记本联想 K41A)显卡出了点问题(该显卡一周前刚换的新的,竟然不到一周又出问题了,联想的质量真的...),在xp下电脑根本进不了操作系统,不断重新启动(可能驱动.系统垃圾太多有关),于是 ...