CSS3实现大小不一的粒子旋转加载动画


Posted in HTML / CSS onApril 21, 2016

先看看效果图,像是气泡在上升:

CSS3实现大小不一的粒子旋转加载动画

CSS Code复制内容到剪贴板
  1. #load3,     
  2. #loader3 {     
  3.  font-size20px;     
  4.  margin80px 50px;     
  5.  floatleft;     
  6.  width: 1em;     
  7.  height: 1em;     
  8.  border-radius: 50%;     
  9.  positionrelative;     
  10.  text-indent: -9999em;     
  11.  -webkit-animation: load3 1.3s infinite linear;     
  12.  animation: load3 1.3s infinite linear;     
  13. }     
  14. @-webkit-keyframes load3 {     
  15.    0%,     
  16.    100% {     
  17.      box-shadow: 0em -3em 0 0.2em #aaff00, 2em -2em 0 0em #aaff00,     
  18.                  3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,     
  19.                  0em 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,     
  20.                  -3em 0 0 -0.5em #aaff00, -2em -2em 0 0em #aaff00;     
  21.    }     
  22.    12.5% {     
  23.      box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 0.2em #aaff00,     
  24.                  3em 0 0 0 #aaff00, 2em 2em 0 -0.5em #aaff00,     
  25.                  0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,     
  26.                  -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     
  27.    }     
  28.    25% {     
  29.       box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 0em #aaff00,     
  30.                   3em 0 0 0.2em #aaff00, 2em 2em 0 0 #aaff00,     
  31.                   0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,     
  32.                   -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     
  33.    }     
  34.    37.5% {     
  35.        box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,     
  36.                    3em 0 0 0 #aaff00, 2em 2em 0 0.2em #aaff00,     
  37.                    0 3em 0 0 #aaff00, -2em 2em 0 -0.5em #aaff00,     
  38.                    -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     
  39.   }     
  40.   50% {     
  41.       box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,     
  42.                   3em 0 0 -0.5em #aaff00, 2em 2em 0 0 #aaff00,     
  43.                   0 3em 0 0.2em #aaff00, -2em 2em 0 0 #aaff00,     
  44.                   -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     
  45.   }     
  46.   62.5% {     
  47.       box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,     
  48.                   3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,     
  49.                   0 3em 0 0 #aaff00, -2em 2em 0 0.2em #aaff00,     
  50.                   -3em 0 0 0 #aaff00, -2em -2em 0 -0.5em #aaff00;     
  51.   }     
  52.   75% {     
  53.      box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,     
  54.                  3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,     
  55.                  0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,     
  56.                  -3em 0 0 0.2em #aaff00, -2em -2em 0 0 #aaff00;     
  57.   }     
  58.   87.5% {     
  59.      box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 -0.5em #aaff00,     
  60.                  3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,     
  61.                  0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,     
  62.                  -3em 0 0 0 #aaff00, -2em -2em 0 0.2em #aaff00;     
  63.   }     
  64. }     
  65. @keyframes load3 {     
  66.   0%,     
  67.   100% {     
  68.       box-shadow: 0 -3em 0 0.2em #aaff00, 2em -2em 0 0 #aaff00,     
  69.                   3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,     
  70.                   0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,     
  71.                   -3em 0 0 -0.5em #aaff00, -2em -2em 0 0 #aaff00;     
  72.   }     
  73.   12.5% {     
  74.       box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 0.2em #aaff00,     
  75.                   3em 0 0 0 #aaff00, 2em 2em 0 -0.5em #aaff00,     
  76.                   0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,     
  77.                   -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     
  78.   }     
  79.   25% {     
  80.       box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 0 #aaff00,     
  81.                   3em 0 0 0.2em #aaff00, 2em 2em 0 0 #aaff00,     
  82.                   0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,     
  83.                   -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     
  84.   }     
  85.   37.5% {     
  86.      box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,     
  87.                  3em 0 0 0 #aaff00, 2em 2em 0 0.2em #aaff00,     
  88.                  0 3em 0 0 #aaff00, -2em 2em 0 -0.5em #aaff00,     
  89.                  -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     
  90.    }     
  91.    50% {     
  92.       box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,     
  93.                   3em 0 0 -0.5em #aaff00, 2em 2em 0 0 #aaff00,     
  94.                   0 3em 0 0.2em #aaff00, -2em 2em 0 0 #aaff00,     
  95.                   -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     
  96.    }     
  97.    62.5% {     
  98.        box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,     
  99.                    3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,     
  100.                    0 3em 0 0 #aaff00, -2em 2em 0 0.2em #aaff00,     
  101.                    -3em 0 0 0 #aaff00, -2em -2em 0 -0.5em #aaff00;     
  102.   }     
  103.   75% {     
  104.       box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,     
  105.                   3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,     
  106.                   0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,     
  107.                   -3em 0 0 0.2em #aaff00, -2em -2em 0 0 #aaff00;     
  108.    }     
  109.    87.5% {     
  110.        box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 -0.5em #aaff00,     
  111.                    3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,     
  112.                    0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,     
  113.                    -3em 0 0 0 #aaff00, -2em -2em 0 0.2em #aaff00;     
  114.   }     
  115. }     
  116.   

以上就是本文的全部内容,希望对大家学习CSS加载动画教程有所帮助。

HTML / CSS 相关文章推荐
css3实现顶部社会化分享按钮示例
May 06 HTML / CSS
CSS3+js实现简单的时钟特效
Mar 18 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
Mar 16 HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
Apr 26 HTML / CSS
Grid 宫格常用布局的实现
Jan 10 HTML / CSS
canvas使用注意点总结
Jul 19 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
Apr 15 HTML / CSS
详解HTML5 Canvas标签及基本使用
Jan 10 HTML / CSS
video实现有声音自动播放的实现方法
May 20 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 HTML / CSS
详解CSS玩转图片Base64编码
May 25 HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
Apr 21 #HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 #HTML / CSS
CSS中越界问题的经典解决方案【推荐】
Apr 19 #HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 #HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 #HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
Apr 11 #HTML / CSS
基础的CSS3弹性盒Flexbox布局使用实例
Apr 08 #HTML / CSS
You might like
PHP配置文件中最常用四个ini函数
2007/03/19 PHP
PHP 调试工具Debug Tools
2011/04/30 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
javascript globalStorage类代码
2009/06/04 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
浅析document.createDocumentFragment()与js效率
2013/07/08 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
王纯业的Python学习笔记 下载
2007/02/10 Python
Python中random模块生成随机数详解
2016/03/10 Python
图文详解WinPE下安装Python
2016/05/17 Python
使用pycharm生成代码模板的实例
2018/05/23 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
简单了解python的break、continue、pass
2019/07/08 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
超市业务员岗位职责
2013/12/05 职场文书
销售员岗位职责范本
2014/02/03 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
健康证明
2015/06/19 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书