CSS3实现粒子旋转伸缩加载动画


Posted in HTML / CSS onApril 22, 2016

本文运用CSS3的旋转Transform属性和动画的执行百分比制作而成,很特别的CSS3实现粒子旋转伸缩加载动画,具体内容如下
 

CSS3实现粒子旋转伸缩加载动画

CSS Code复制内容到剪贴板
  1. #loader6 {     
  2.   margin60px 50px;     
  3.   floatleft;     
  4.   font-size90px;     
  5.   text-indent: -9999em;     
  6.   overflowhidden;     
  7.   width: 1em;     
  8.   height: 1em;     
  9.   border-radius: 50%;     
  10.   positionrelative;     
  11.   -webkit-animation: load6 1.7s infinite ease;     
  12.   animation: load6 1.7s infinite ease;     
  13.  }     
  14.  @-webkit-keyframes load6 {     
  15.     0% {     
  16.       -webkit-transform: rotate(0deg);     
  17.       transform: rotate(0deg);     
  18.       box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,     
  19.                   -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,     
  20.                   -0.11em -0.83em 0 -0.477em #ff0000;     
  21.       }     
  22.     5%,     
  23.     95% {     
  24.       box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,     
  25.                   -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,     
  26.                   -0.11em -0.83em 0 -0.477em #ff0000;     
  27.     }     
  28.     30% {     
  29.       box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.51em -0.66em 0 -0.42em #ff0000,     
  30.                   -0.75em -0.36em 0 -0.44em #ff0000, -0.83em -0.03em 0 -0.46em #ff0000,     
  31.                   -0.81em 0.21em 0 -0.477em #ff0000;     
  32.     }     
  33.     55% {     
  34.       box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.29em -0.78em 0 -0.42em #ff0000,     
  35.                   -0.43em -0.72em 0 -0.44em #ff0000, -0.52em -0.65em 0 -0.46em #ff0000,     
  36.                   -0.57em -0.61em 0 -0.477em #ff0000;     
  37.     }     
  38.     100% {     
  39.       -webkit-transform: rotate(360deg);     
  40.       transform: rotate(360deg);     
  41.       box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,     
  42.                   -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,     
  43.                   -0.11em -0.83em 0 -0.477em #ff0000;     
  44.     }     
  45.  }     
  46. @keyframes load6 {     
  47.   0% {     
  48.     -webkit-transform: rotate(0deg);     
  49.     transform: rotate(0deg);     
  50.     box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,     
  51.                 -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,     
  52.                 -0.11em -0.83em 0 -0.477em #ff0000;     
  53.     }     
  54.   5%,     
  55.   95% {     
  56.     box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,     
  57.                 -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,     
  58.                 -0.11em -0.83em 0 -0.477em #ff0000;     
  59.   }     
  60.   30% {     
  61.     box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.51em -0.66em 0 -0.42em #ff0000,     
  62.                 -0.75em -0.36em 0 -0.44em #ff0000, -0.83em -0.03em 0 -0.46em #ff0000,     
  63.                 -0.81em 0.21em 0 -0.477em #ff0000;     
  64.   }     
  65.   55% {     
  66.     box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.29em -0.78em 0 -0.42em #ff0000,     
  67.                 -0.43em -0.72em 0 -0.44em #ff0000, -0.52em -0.65em 0 -0.46em #ff0000,     
  68.                 -0.57em -0.61em 0 -0.477em #ff0000;     
  69.   }     
  70.   100% {     
  71.     -webkit-transform: rotate(360deg);     
  72.     transform: rotate(360deg);     
  73.     box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,     
  74.                 -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,     
  75.                 -0.11em -0.83em 0 -0.477em #ff0000;     
  76.   }     
  77. }     

以上就是本文的全部内容,希望对大家学习CSS样式编写有所帮助,制作出更多精彩的加载动画效果。 

HTML / CSS 相关文章推荐
一款纯css3实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
使用CSS3制作响应式导航菜单的方法
Jul 12 HTML / CSS
CSS3实现可关闭的下拉手风琴菜单效果
Aug 31 HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
Apr 19 HTML / CSS
HTML5移动开发图片压缩上传功能
Nov 09 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
Dec 20 HTML / CSS
配置H5的滚动条样式的示例代码
Mar 09 HTML / CSS
html5+实现plus.io进行拍照和图片等获取
Jun 01 HTML / CSS
一款利用html5和css3实现的3D立方体旋转效果教程
Apr 26 #HTML / CSS
CSS3弹性盒模型开发笔记(一)
Apr 26 #HTML / CSS
CSS3弹性盒模型开发笔记(三)
Apr 26 #HTML / CSS
浅析两列自适应布局的3种思路
May 03 #HTML / CSS
CSS3 3D位移translate效果实例介绍
May 03 #HTML / CSS
详解CSS的border边框属性及其在CSS3中的新特性
May 10 #HTML / CSS
CSS3中border-radius属性设定圆角的使用技巧
May 10 #HTML / CSS
You might like
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
详解Vue的mixin策略
2020/11/19 Vue.js
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
python字符串的常用操作方法小结
2016/05/21 Python
python 字符串和整数的转换方法
2018/06/25 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
Python Merge函数原理及用法解析
2020/09/16 Python
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
晚会邀请函范文
2014/01/24 职场文书
高级销售求职信
2014/02/21 职场文书
教室标语大全
2014/06/21 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
建党伟业的观后感
2015/06/01 职场文书
关于环保的广播稿
2015/12/17 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
委托书范本格式
2019/04/18 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书
方法汇总:Python 安装第三方库常用
2022/04/26 Python