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制作半透明边框(Facebox)类似渐变
Dec 09 HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
Nov 16 HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 HTML / CSS
HTML5 中新的全局属性(整理)
Jul 31 HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
Jan 20 HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 HTML / CSS
htnl5利用svg页面高斯模糊的方法
Jul 20 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
Feb 03 HTML / CSS
css中有哪些方式可以隐藏页面元素及区别
Jun 16 HTML / CSS
CSS的calc函数用法小结
Jun 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中实现进程间通讯
2006/10/09 PHP
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
利用PHP实现短域名互转
2013/07/05 PHP
分享php分页的功能模块
2015/06/16 PHP
javascript之学会吝啬 精简代码
2010/04/25 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
详解vue 自定义组件使用v-model 及探究其中原理
2019/10/11 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
Django跨域请求问题的解决方法示例
2018/06/16 Python
Django添加sitemap的方法示例
2018/08/06 Python
使用python打印十行杨辉三角过程详解
2019/07/10 Python
浅析python redis的连接及相关操作
2019/11/07 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
Pytest mark使用实例及原理解析
2020/02/22 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
事业单位个人应聘自荐信
2013/09/21 职场文书
护士专业推荐信
2013/11/02 职场文书
创业计划实施的7大步骤
2014/02/05 职场文书
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技