纯css3实现 正在加载 动画
2015-12-16 16:21
696 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>加载动画</title> <style> /* 加载动画.html css */ #load_bg { width: 100%; height: 100%; position: fixed; background: rgba(0, 0, 0, 0.3); top: 0; left: 0; bottom: 0; z-index: 1; } .load_box { width: 200px; height: 200px; position: fixed; left: 50%; top: 50%; margin: 0 auto; z-index: 2; margin-top: -100px; margin-left: -100px; } .load_box > .load { align-items: center; justify-content: center; } .load_box > .load > .loading > i { display: inline-block; width: 5px; height: 30px; border-radius: 3px; background: #333; margin: 0 3px; } .load_box > .load > .loading > i:nth-child(1) { animation: loading-2 1s linear 0s infinite; -o-animation: loading-2 1s linear 0s infinite; -moz-animation: loading-2 1s linear 0s infinite; -webkit-animation: loading-2 1s linear 0s infinite; } .load_box > .load > .loading > i:nth-child(2) { animation: loading-2 1s ease-in 0.2s infinite; -o-animation: loading-2 1s ease-in 0.2s infinite; -moz-animation: loading-2 1s ease-in 0.2s infinite; -webkit-animation: loading-2 1s ease-in 0.2s infinite; } .load_box > .load > .loading > i:nth-child(3) { animation: loading-2 1s ease-in 0.4s infinite; -o-animation: loading-2 1s ease-in 0.4s infinite; -moz-animation: loading-2 1s ease-in 0.4s infinite; -webkit-animation: loading-2 1s ease-in 0.4s infinite; } .load_box > .load > .loading > i:nth-child(4) { animation: loading-2 1s ease-in 0.8s infinite; -o-animation: loading-2 1s ease-in 0.8s infinite; -moz-animation: loading-2 1s ease-in 0.8s infinite; -webkit-animation: loading-2 1s ease-in 0.8s infinite; } .load_box > .load > .loading > i:nth-child(5) { animation: loading-2 1s ease-in 1s infinite; -o-animation: loading-2 1s ease-in 1s infinite; -moz-animation: loading-2 1s ease-in 1s infinite; -webkit-animation: loading-2 1s ease-in 1s infinite; } @-webkit-keyframes loading-2 { 0% { transform: scaleY(1); -o-transform: scaleY(1); -ms-transform: scaleY(1); -moz-transform: scaleY(1); -webkit-transform: scaleY(1); } 50% { transform: scaleY(0.4); -o-transform: scaleY(0.4); -ms-transform: scaleY(0.4); -moz-transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 100% { transform: scaleY(1); -o-transform: scaleY(1); -ms-transform: scaleY(1); -moz-transform: scaleY(1); -webkit-transform: scaleY(1); } } </style> </head> <body style="background: #fff"> <!--遮罩层开始--> <div id="load_bg"></div> <div class="load_box"> <div class="load"> <div class="loading"> <i></i> <i></i> <i></i> <i></i> <i></i> </div><!-- ./loading end--> </div><!--./load end--> </div><!--./box end--> </body> </html>
相关文章推荐
- CSS3属性教程与案例分享
- CSS3属性教程与案例分享
- CSS3的calc()使用
- 使用CSS3的appearance属性改变元素的外观
- CSS3美化图片
- CSS3质感分析——表面线性渐变
- 分析选项卡底部内凹圆角制作
- 细说百度图片栏目——图片展示效果
- 8个实用的响应式设计框架
- 20+ Animation Scripts, Libraries and Plugins
- Gifski:一个跨平台的高质量 GIF 编码器
- 如何使用CSS3画出一个叮当猫
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- 模仿动画的放大缩小容器
- jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
- Android中ViewFlipper的使用及设置动画效果实例详解
- jQuery实现美观的多级动画效果菜单代码
- php判断GIF图片是否为动画的方法
- jQuery实现动画效果circle实例
- CSS3实例分享之多重背景的实现(Multiple backgrounds)