CSS3实现大小不一的粒子旋转加载动画
2016-04-21 11:45
916 查看
先看看效果图,像是气泡在上升:
以上就是本文的全部内容,希望对大家学习CSS加载动画教程有所帮助。
#load3, #loader3 { font-size: 20px; margin: 80px 50px; float: left; width: 1em; height: 1em; border-radius: 50%; position: relative; text-indent: -9999em; -webkit-animation: load3 1.3s infinite linear; animation: load3 1.3s infinite linear; } @-webkit-keyframes load3 { 0%, 100% { box-shadow: 0em -3em 0 0.2em #aaff00, 2em -2em 0 0em #aaff00, 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00, 0em 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00, -3em 0 0 -0.5em #aaff00, -2em -2em 0 0em #aaff00; } 12.5% { box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 0.2em #aaff00, 3em 0 0 0 #aaff00, 2em 2em 0 -0.5em #aaff00, 0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00, -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00; } 25% { box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 0em #aaff00, 3em 0 0 0.2em #aaff00, 2em 2em 0 0 #aaff00, 0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00, -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00; } 37.5% { box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00, 3em 0 0 0 #aaff00, 2em 2em 0 0.2em #aaff00, 0 3em 0 0 #aaff00, -2em 2em 0 -0.5em #aaff00, -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00; } 50% { box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00, 3em 0 0 -0.5em #aaff00, 2em 2em 0 0 #aaff00, 0 3em 0 0.2em #aaff00, -2em 2em 0 0 #aaff00, -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00; } 62.5% { box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00, 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00, 0 3em 0 0 #aaff00, -2em 2em 0 0.2em #aaff00, -3em 0 0 0 #aaff00, -2em -2em 0 -0.5em #aaff00; } 75% { box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00, 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00, 0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00, -3em 0 0 0.2em #aaff00, -2em -2em 0 0 #aaff00; } 87.5% { box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 -0.5em #aaff00, 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00, 0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00, -3em 0 0 0 #aaff00, -2em -2em 0 0.2em #aaff00; } } @keyframes load3 { 0%, 100% { box-shadow: 0 -3em 0 0.2em #aaff00, 2em -2em 0 0 #aaff00, 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00, 0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00, -3em 0 0 -0.5em #aaff00, -2em -2em 0 0 #aaff00; } 12.5% { box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 0.2em #aaff00, 3em 0 0 0 #aaff00, 2em 2em 0 -0.5em #aaff00, 0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00, -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00; } 25% { box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 0 #aaff00, 3em 0 0 0.2em #aaff00, 2em 2em 0 0 #aaff00, 0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00, -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00; } 37.5% { box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00, 3em 0 0 0 #aaff00, 2em 2em 0 0.2em #aaff00, 0 3em 0 0 #aaff00, -2em 2em 0 -0.5em #aaff00, -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00; } 50% { box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00, 3em 0 0 -0.5em #aaff00, 2em 2em 0 0 #aaff00, 0 3em 0 0.2em #aaff00, -2em 2em 0 0 #aaff00, -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00; } 62.5% { box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00, 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00, 0 3em 0 0 #aaff00, -2em 2em 0 0.2em #aaff00, -3em 0 0 0 #aaff00, -2em -2em 0 -0.5em #aaff00; } 75% { box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00, 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00, 0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00, -3em 0 0 0.2em #aaff00, -2em -2em 0 0 #aaff00; } 87.5% { box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 -0.5em #aaff00, 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00, 0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00, -3em 0 0 0 #aaff00, -2em -2em 0 0.2em #aaff00; } }
以上就是本文的全部内容,希望对大家学习CSS加载动画教程有所帮助。
相关文章推荐
- CSS3属性教程与案例分享
- CSS3属性教程与案例分享
- CSS3的calc()使用
- 使用CSS3的appearance属性改变元素的外观
- CSS3美化图片
- CSS3质感分析——表面线性渐变
- 分析选项卡底部内凹圆角制作
- 细说百度图片栏目——图片展示效果
- 8个实用的响应式设计框架
- 20+ Animation Scripts, Libraries and Plugins
- 如何使用CSS3画出一个叮当猫
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- jQuery CSS3相结合实现时钟插件
- CSS3实例分享之多重背景的实现(Multiple backgrounds)
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- CSS3中Transition属性详解以及示例分享
- 基于jQuery和CSS3制作响应式水平时间轴附源码下载
- jquery+CSS3模拟Path2.0动画菜单效果代码
- jquery+css3实现会动的小圆圈效果
- 分享33个jQuery与CSS3实现的绚丽鼠标悬停效果