CSS3轻松实现清新 Loading 效果
2016-06-06 10:39
465 查看
至今HTML5中国已经为大家分享过几百种基于 CSS3 的Loading加载动画,效果酷炫代码简洁,非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例。
HTML部分
上面这两个都是大家常用的加载效果,下面的就不依依的现实代码了,有需要的小伙伴请给我留言!
第三种loading效果
第四种loading效果
第五种loading效果
第六种loading效果
第七种loading效果
这些效果都是用CSS3实现的,是不是很厉害,想要学习的小伙伴记得给我留言哦!如果大家有更牛气的效果记得偷偷的发给我哦!
有问题请点击: 小月博客 联系我哦!
第一种效果:
HTML部分
<div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
CSS3部分
.loading{ width: 80px; height: 40px; margin: 0 auto; margin-top:100px; } .loading span{ display: inline-block; width: 8px; height: 100%; border-radius: 4px; background: lightgreen; -webkit-animation: load 1s ease infinite; } @-webkit-keyframes load{ 0%,100%{ height: 40px; background: lightgreen; } 50%{ height: 70px; margin: -15px 0; background: lightblue; } } .loading span:nth-child(2){ -webkit-animation-delay:0.2s; } .loading span:nth-child(3){ -webkit-animation-delay:0.4s; } .loading span:nth-child(4){ -webkit-animation-delay:0.6s; } .loading span:nth-child(5){ -webkit-animation-delay:0.8s; }
第二种效果:
HTML部分
<div class="loadEffect"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
CSS3部分
.loadEffect{ width: 100px; height: 100px; position: relative; margin: 0 auto; margin-top:100px; } .loadEffect span{ display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: lightgreen; position: absolute; -webkit-animation: load 1.04s ease infinite; } @-webkit-keyframes load{ 0%{ opacity: 1; } 100%{ opacity: 0.2; } } .loadEffect span:nth-child(1){ left: 0; top: 50%; margin-top:-8px; -webkit-animation-delay:0.13s; } .loadEffect span:nth-child(2){ left: 14px; top: 14px; -webkit-animation-delay:0.26s; } .loadEffect span:nth-child(3){ left: 50%; top: 0; margin-left: -8px; -webkit-animation-delay:0.39s; } .loadEffect span:nth-child(4){ top: 14px; right:14px; -webkit-animation-delay:0.52s; } .loadEffect span:nth-child(5){ right: 0; top: 50%; margin-top:-8px; -webkit-animation-delay:0.65s; } .loadEffect span:nth-child(6){ right: 14px; bottom:14px; -webkit-animation-delay:0.78s; } .loadEffect span:nth-child(7){ bottom: 0; left: 50%; margin-left: -8px; -webkit-animation-delay:0.91s; } .loadEffect span:nth-child(8){ bottom: 14px; left: 14px; -webkit-animation-delay:1.04s; }
上面这两个都是大家常用的加载效果,下面的就不依依的现实代码了,有需要的小伙伴请给我留言!
更多效果如下所示:
第三种loading效果
第四种loading效果
第五种loading效果
第六种loading效果
第七种loading效果
这些效果都是用CSS3实现的,是不是很厉害,想要学习的小伙伴记得给我留言哦!如果大家有更牛气的效果记得偷偷的发给我哦!
有问题请点击: 小月博客 联系我哦!
相关文章推荐
- ci 框架 index.php以及 js css 路径问题
- js、css引用文件的下载方式
- CSS之生成全屏背景图片
- CSS中的层叠上下文和层叠水平
- CSS快速排序算法实现10000条数据颠倒顺序的实例代码
- 面向属性的CSS命名
- css零星进阶知识点
- html之div+css布局
- 【转】SMACSS 学习笔记
- css annimate动画
- 'border:none' or 'border:0'
- 团队项目-广商百货-玩玩新样式
- 网页设计之初学CSS
- CSS初识
- 与border相关被遗漏的属性及图标制作
- css动效学习
- BFC 神奇背后的原理
- CSS水平居中/垂直居中的N个方法
- 实习入职第十六天:seekBar自定义样式
- gulp-mockapi