1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <style type="text/css">
  8.     .box {
  9.         width: 100%;
  10.         padding: 3%;
  11.         box-sizing: border-box;
  12.         overflow: hidden
  13.     }
  14.  
  15.     .box .loader {
  16.         width: 30%;
  17.         float: left;
  18.         height: 200px;
  19.         margin-right: 3%;
  20.         border: 1px #ccc solid;
  21.         box-sizing: border-box;
  22.         display: flex;
  23.         align-items: center;
  24.         justify-content: center
  25.     }
  26.  
  27.     @-webkit-keyframes loading-1 {
  28.         0% {
  29.             transform: rotate(0deg)
  30.         }
  31.         50% {
  32.             transform: rotate(180deg)
  33.         }
  34.         100% {
  35.             transform: rotate(360deg)
  36.         }
  37.     }
  38.  
  39.     .loading-1 {
  40.         width: 35px;
  41.         height: 35px;
  42.         position: relative
  43.     }
  44.  
  45.     .loading-1 i {
  46.         display: block;
  47.         width: 100%;
  48.         height: 100%;
  49.         border-radius: 50%;
  50.         background: linear-gradient(transparent 0, transparent 70%, #333 30%, #333 100%);
  51.         -webkit-animation: loading-1 .6s linear 0s infinite
  52.     }
  53.  
  54.     @-webkit-keyframes loading-2 {
  55.         0% {
  56.             transform: scaleY(1)
  57.         }
  58.         50% {
  59.             transform: scaleY(.4)
  60.         }
  61.         100% {
  62.             transform: scaleY(1)
  63.         }
  64.     }
  65.  
  66.     .loading-2 i {
  67.         display: inline-block;
  68.         width: 4px;
  69.         height: 35px;
  70.         border-radius: 2px;
  71.         margin: 0 2px;
  72.         background-color: #333
  73.     }
  74.  
  75.     .loading-2 i:nth-child(1) {
  76.         -webkit-animation: loading-2 1s ease-in .1s infinite
  77.     }
  78.  
  79.     .loading-2 i:nth-child(2) {
  80.         -webkit-animation: loading-2 1s ease-in .2s infinite
  81.     }
  82.  
  83.     .loading-2 i:nth-child(3) {
  84.         -webkit-animation: loading-2 1s ease-in .3s infinite
  85.     }
  86.  
  87.     .loading-2 i:nth-child(4) {
  88.         -webkit-animation: loading-2 1s ease-in .4s infinite
  89.     }
  90.  
  91.     .loading-2 i:nth-child(5) {
  92.         -webkit-animation: loading-2 1s ease-in .5s infinite
  93.     }
  94.  
  95.     @-webkit-keyframes loading-3 {
  96.         50% {
  97.             transform: scale(.4);
  98.             opacity: .3
  99.         }
  100.         100% {
  101.             transform: scale(1);
  102.             opacity: 1
  103.         }
  104.     }
  105.  
  106.     .loading-3 {
  107.         position: relative
  108.     }
  109.  
  110.     .loading-3 i {
  111.         display: block;
  112.         width: 15px;
  113.         height: 15px;
  114.         border-radius: 50%;
  115.         background-color: #333;
  116.         position: absolute
  117.     }
  118.  
  119.     .loading-3 i:nth-child(1) {
  120.         top: 25px;
  121.         left: 0;
  122.         -webkit-animation: loading-3 1s ease 0s infinite
  123.     }
  124.  
  125.     .loading-3 i:nth-child(2) {
  126.         top: 17px;
  127.         left: 17px;
  128.         -webkit-animation: loading-3 1s ease -.12s infinite
  129.     }
  130.  
  131.     .loading-3 i:nth-child(3) {
  132.         top: 0;
  133.         left: 25px;
  134.         -webkit-animation: loading-3 1s ease -.24s infinite
  135.     }
  136.  
  137.     .loading-3 i:nth-child(4) {
  138.         top: -17px;
  139.         left: 17px;
  140.         -webkit-animation: loading-3 1s ease -.36s infinite
  141.     }
  142.  
  143.     .loading-3 i:nth-child(5) {
  144.         top: -25px;
  145.         left: 0;
  146.         -webkit-animation: loading-3 1s ease -.48s infinite
  147.     }
  148.  
  149.     .loading-3 i:nth-child(6) {
  150.         top: -17px;
  151.         left: -17px;
  152.         -webkit-animation: loading-3 1s ease -.6s infinite
  153.     }
  154.  
  155.     .loading-3 i:nth-child(7) {
  156.         top: 0;
  157.         left: -25px;
  158.         -webkit-animation: loading-3 1s ease -.72s infinite
  159.     }
  160.  
  161.     .loading-3 i:nth-child(8) {
  162.         top: 17px;
  163.         left: -17px;
  164.         -webkit-animation: loading-3 1s ease -.84s infinite
  165.     }
  166.  
  167. </style>
  168. <body>
  169. <div class="box">
  170.     <div class="loader">
  171.         <div class="loading-1">
  172.             <i></i>
  173.         </div>
  174.     </div>
  175.  
  176.     <div class="loader">
  177.         <div class="loading-2">
  178.             <i></i>
  179.             <i></i>
  180.             <i></i>
  181.             <i></i>
  182.             <i></i>
  183.         </div>
  184.     </div>
  185.  
  186.     <div class="loader">
  187.         <div class="loading-3">
  188.             <i></i>
  189.             <i></i>
  190.             <i></i>
  191.             <i></i>
  192.             <i></i>
  193.             <i></i>
  194.             <i></i>
  195.             <i></i>
  196.         </div>
  197.     </div>
  198. </div>
  199. </body>
  200. </html>

 

css3 loading 效果的更多相关文章

  1. HTML5+CSS3 loading 效果收集－－转载

    用gif图片来做loading的时代已经过去了,它显得太low了,而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足.这已经成为一种趋势. 这里收集了几十个用html5和 ...

  2. CSS3 loading效果全

    梦想天空 关注前端开发技术 ◆ 推动 HTML5 & CSS3 技术发展 ◆ 本博客全新站点:yyyweb.com 欢迎围观:) 首页 管理 订阅 网页设计 JavaScript jQuery ...

  3. html5 css3 loading 效果

    canvas  html5load1 主要思路update  实现12个点的绘制和旋转效果 var update = function() { ctx.save();// 把当前绘图状态保存起来 ct ...

  4. css3 loading效果

    file:///E:/zhangqiangWork/2014/SPDbank/index.html 参考该网站 http://tobiasahlin.com/spinkit/ 查看源代码把里面的dom ...

  5. 【转】 CSS3实现10种Loading效果

    昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… PS:如需转载,请注明出处! 第1种效果: 代码如下: <div class="l ...

  6. CSS3轻松实现清新 Loading 效果

    至今HTML5中国已经为大家分享过几百种基于 CSS3 的Loading加载动画,效果酷炫代码简洁,非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例. 第一种效果: HTM ...

  7. CSS3实现10种Loading效果

    昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… 第1种效果: 代码如下: <div class="loading"> ...

  8. CSS3实现8种Loading效果【第二波】

    原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊 ...

  9. 用CSS3实现饼状loading效果

    原文地址:http://visugar.com/2017/05/17/CSS3%E9%A5%BC%E7%8A%B6loading%E6%95%88%E6%9E%9C/ 写在前面 (附录有源码及效果) ...

随机推荐

  1. STRTOK函数和STRTOK_R函数

    STRTOK函数和STRTOK_R函数 注:本文转载自博客园,感谢作者整理! 1.一个应用实例 网络上一个比较经典的例子是将字符串切分,存入结构体中.如,现有结构体 typedef struct pe ...

  2. 树莓派进阶之路 (021) - 3.2inch RPi LCD (B)

    参考文档:http://www.waveshare.net/wiki/3.2inch_RPi_LCD_(B) 产品特点 320x240分辨率 电阻式触摸控制 兼容并可直接插入任何版本树莓派 提供Ras ...

  3. linux达人养成计划学习笔记（六）—— 挂载命令

    一.查询与自动挂载 mount #查询系统中已挂载的设备 mount -a #根据配置文件/etc/fstab的内容,自动挂载 二.挂载命令格式 mount [-t 文件系统] [-o 特殊选项] 设 ...

  4. sql 2005出现错误:数据库 'Twitter' 的事务日志已满。若要查明无法重用日志中的空间的原因，请参阅 sys.databases 中的 log_reuse_wait_desc 列。

    --先备份数据库 --截断事务日志 backup   log   Twitter with   no_loggo --收缩数据库 dbcc   shrinkdatabase(Twitter) go O ...

  5. FluentValidation：C#后端输入验证框架的官方文档解读

    参照 FluentValidation 的官方文档写的例子,方便日后查看和使用. 原文:https://github.com/JeremySkinner/FluentValidation/wiki H ...

  6. Docker LNMP环境搭建

    原文地址:https://www.awaimai.com/2120.html 1 快速使用 2 安装docker和docker-compose 3 使用国内镜像仓库 4 目录说明 4.1 目录结构 4 ...

  7. Config程序配置文件操作实践进阶之ConfigurationSectionGroup

    今天又进一步对System.Configuration下的ConfigurationSectionGroup类及相关的类与方法进行了研究.发现要构建多层次嵌套的XML标签 则必须用到Configura ...

  8. win7怎么快速截取图片

    点击开始--运行或者winkey + r 键直接进入运行. 2 在输入框输入snippingtool,点击确定. 3 这就找到截图工具,如图. END 方法/步骤2   进入c盘--Windows-- ...

  9. Bitnami Redmine 中文附件名 报错修复

    最近自己在服务器上搭了个redmine,用的是Bitnami的一键安装程序. 搭好后,运行得不错,居然还增加了负载均衡. 某天上传中文附件,打开报内部错误,去redmine官网看了下,果然有这个问题, ...

  10. 还没被玩坏的robobrowser(2)——安装及快速开始

    安装robobrowser 注意:这里假设你知道如何使用pip安装python的库的知识,如果你不了解这一块的话,点这里获取帮助. 强烈推荐使用pip安装. pip install robobrows ...