原文链接：http://www.cnblogs.com/jr1993/p/4622039.html

第一种效果：

代码如下：

<div class="loading"><span></span><span></span><span></span><span></span><span></span>
</div>

CSS代码：

.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="loading"><span></span>
</div>

CSS代码

.loading{width: 150px;height: 4px;border-radius: 2px;margin: 0 auto;margin-top:100px;position: relative;background: lightgreen;-webkit-animation: changeBgColor 1.04s ease-in infinite alternate;}.loading span{display: inline-block;width: 16px;height: 16px;border-radius: 50%;background: lightgreen;position: absolute;margin-top: -7px;margin-left:-8px;-webkit-animation: changePosition 1.04s ease-in infinite alternate;}@-webkit-keyframes changeBgColor{0%{background: lightgreen;}100%{background: lightblue;}}@-webkit-keyframes changePosition{0%{background: lightgreen;}100%{margin-left: 142px;background: lightblue;}}

第三、四、五种效果

HTML代码

<div class="loading"><span></span><span></span><span></span><span></span><span></span>
</div>

CSS代码

.loading{width: 150px;height: 15px;margin: 0 auto;margin-top:100px;}.loading span{display: inline-block;width: 15px;height: 100%;margin-right: 5px;border-radius: 50%;background: lightgreen;-webkit-animation: load 1.04s ease infinite;}.loading span:last-child{margin-right: 0px; }@-webkit-keyframes load{0%{opacity: 1;}100%{opacity: 0;}}.loading span:nth-child(1){-webkit-animation-delay:0.13s;}.loading span:nth-child(2){-webkit-animation-delay:0.26s;}.loading span:nth-child(3){-webkit-animation-delay:0.39s;}.loading span:nth-child(4){-webkit-animation-delay:0.52s;}.loading span:nth-child(5){-webkit-animation-delay:0.65s;}

.loading{width: 150px;height: 15px;margin: 0 auto;margin-top:100px;}.loading span{display: inline-block;width: 15px;height: 100%;margin-right: 5px;border-radius: 50%;background: lightgreen;-webkit-animation: load 1.04s ease infinite;}.loading span:last-child{margin-right: 0px; }@-webkit-keyframes load{0%{opacity: 1;-webkit-transform: scale(1.3);}100%{opacity: 0.2;-webkit-transform: scale(.3);}}.loading span:nth-child(1){-webkit-animation-delay:0.13s;}.loading span:nth-child(2){-webkit-animation-delay:0.26s;}.loading span:nth-child(3){-webkit-animation-delay:0.39s;}.loading span:nth-child(4){-webkit-animation-delay:0.52s;}.loading span:nth-child(5){-webkit-animation-delay:0.65s;}

.loading{width: 150px;height: 15px;margin: 0 auto;position: relative;margin-top:100px;}.loading span{position: absolute;width: 15px;height: 100%;border-radius: 50%;background: lightgreen;-webkit-animation: load 1.04s ease-in infinite alternate;}@-webkit-keyframes load{0%{opacity: 1;-webkit-transform: translate(0px);}100%{opacity: 0.2;-webkit-transform: translate(150px);}}.loading span:nth-child(1){-webkit-animation-delay:0.13s;}.loading span:nth-child(2){-webkit-animation-delay:0.26s;}.loading span:nth-child(3){-webkit-animation-delay:0.39s;}.loading span:nth-child(4){-webkit-animation-delay:0.52s;}.loading span:nth-child(5){-webkit-animation-delay:0.65s;}

第六、七、八种效果

HTML代码

<div class="loading"><span></span><span></span><span></span><span></span><span></span>
</div>

CSS代码

.loading{width: 150px;height: 15px;margin: 0 auto;margin-top:100px;text-align: center;}.loading span{display: inline-block;width: 15px;height: 100%;margin-right: 5px;background: lightgreen;-webkit-animation: load 1.04s ease infinite;}.loading span:last-child{margin-right: 0px; }@-webkit-keyframes load{0%{opacity: 1;}100%{opacity: 0;}}.loading span:nth-child(1){-webkit-animation-delay:0.13s;}.loading span:nth-child(2){-webkit-animation-delay:0.26s;}.loading span:nth-child(3){-webkit-animation-delay:0.39s;}.loading span:nth-child(4){-webkit-animation-delay:0.52s;}.loading span:nth-child(5){-webkit-animation-delay:0.65s;}

.loading{width: 150px;height: 15px;margin: 0 auto;margin-top:100px;}.loading span{display: inline-block;width: 15px;height: 100%;margin-right: 5px;background: lightgreen;-webkit-transform-origin: right bottom;-webkit-animation: load 1s ease infinite;}.loading span:last-child{margin-right: 0px; }@-webkit-keyframes load{0%{opacity: 1;}100%{opacity: 0;-webkit-transform: rotate(90deg);}}.loading span:nth-child(1){-webkit-animation-delay:0.13s;}.loading span:nth-child(2){-webkit-animation-delay:0.26s;}.loading span:nth-child(3){-webkit-animation-delay:0.39s;}.loading span:nth-child(4){-webkit-animation-delay:0.52s;}.loading span:nth-child(5){-webkit-animation-delay:0.65s;}

.loading{width: 150px;height: 15px;margin: 0 auto;margin-top:100px;}.loading span{display: inline-block;width: 15px;height: 100%;margin-right: 5px;background: lightgreen;-webkit-transform-origin: right bottom;-webkit-animation: load 1s ease infinite;}.loading span:last-child{margin-right: 0px; }@-webkit-keyframes load{0%{opacity: 1;-webkit-transform: scale(1);}100%{opacity: 0;-webkit-transform: rotate(90deg) scale(.3);}}.loading span:nth-child(1){-webkit-animation-delay:0.13s;}.loading span:nth-child(2){-webkit-animation-delay:0.26s;}.loading span:nth-child(3){-webkit-animation-delay:0.39s;}.loading span:nth-child(4){-webkit-animation-delay:0.52s;}.loading span:nth-child(5){-webkit-animation-delay:0.65s;}

第九、十种效果 

<div class="loadEffect"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>

.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;}

.loadEffect{width: 100px;height: 100px;position: relative;margin: 0 auto;margin-top:100px;}.loadEffect span{display: inline-block;width: 20px;height: 20px;border-radius: 50%;background: lightgreen;position: absolute;-webkit-animation: load 1.04s ease infinite;}@-webkit-keyframes load{0%{-webkit-transform: scale(1.2);opacity: 1;}100%{-webkit-transform: scale(.3);opacity: 0.5;}}.loadEffect span:nth-child(1){left: 0;top: 50%;margin-top:-10px;-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: -10px;-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:-10px;-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: -10px;-webkit-animation-delay:0.91s;}.loadEffect span:nth-child(8){bottom: 14px;left: 14px;-webkit-animation-delay:1.04s;}

转载于:https://www.cnblogs.com/macliu/p/6485412.html

10种CSS3实现的Loading效果相关推荐

  1. 10种黑白色系摄影调色效果lr预设

    10 x Lightroom Presets, Bleached是一套包含10种黑白色系摄影调色效果的lr预设,黑白色系摄影调色Lr预设只需单击一下按钮即可为您的图像更上一层楼,黑白色系摄影调色效果l ...

  2. php loading效果,利用CSS3打造十种Loading效果

    第1种效果: 代码如下: html css.loading{ width: 80px; height: 40px; margin: 0 auto; margin-top:100px; } .loadi ...

  3. css3四个花瓣,css3实现花瓣loading效果(keyframes+animation+transform)

    [实例简介] [实例截图] [核心代码] - body { background: #161B29; margin: 0 auto; height: 100%; width: 100%; overfl ...

  4. HTML5+CSS3 最酷的 loading 效果汇总

    用 gif 图片来做 loading 的时代已经过去了,它显得太 low 了,而用 HTML5/CSS3 以及 SVG 和 canvas 来做加载动画显得既炫酷又逼格十足.这已经成为一种趋势. 这里收 ...

  5. 【转】 CSS3实现10种Loading效果

    昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记-- PS:如需转载,请注明出处! 第1种效果: 代码如下: <div class="l ...

  6. CSS3实现8种Loading效果【第二波】

    CSS3实现8种Loading效果[第二波] 原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接"上菜"-- 注: ...

  7. html加载特效大全,10种炫酷的CSS3 loading加载动画特效

    这是一组效果非常炫酷的纯CSS3 loading加载动画特效.这组loading动画共10种不同的效果,全部使用animation帧动画制作而成.这些特效代码简洁,效果炫酷,非常值得学习借鉴. 制作方 ...

  8. css实现loading,CSS3实现18种Loading效果

    昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记-- 第1种效果: 代码如下: .loading{ width: 80px; height: 40px; ...

  9. CSS3打造的10种创意动画菜单效果

    CSS3新增添了实现动画效果的新功能,通过本文,你可以对这些新功能有个初步了解.本文将为大家带来一些充满创意的菜单悬停效果.它由图标,主标题,副标题等简单的元素构成,通过CSS3最新的过渡(trans ...

最新文章

  1. python虚拟环境的目录是啥_Python 虚拟环境
  2. 初步了解Telerik for WPF 控件
  3. 排序方法的分类 算法
  4. java 正则 实例_Java正则表达式实例详解
  5. 安装phproject之一
  6. SGA_TARGET
  7. 2020牛客暑期多校训练营（第一场）
  8. mdb 查询过于复杂_【律联云知产课堂】南京商标查询主要从哪些方面判断一个商标是否适合注册？...
  9. 快速排序算法_算法设计技巧之分治算法（Java实现快速排序、归并排序）
  10. 游竹林寺不得，谈封山收费
  11. chrome PPAPI 开发（一）
  12. 极路由第三方插件大全_极路由极硬货HC5663春节折腾记
  13. android netcfg命令,Android netcfg
  14. Win10经常断开网络连接的原因
  15. Maven 项目查找 jar 包是由哪个依赖引入的
  16. 从华科到清华这些年，我和焦虑成为朋友
  17. Kafka topic分区增加副本
  18. 面试之其他面试题归类
  19. 最新版安全狗(v4.0.2.665) 文件上传 绕过
  20. 编写一个完整的矩阵向量乘法的MPI编程代码

热门文章

  1. 数智化时代合格数据架构师如何养成？
  2. 开发者盛宴！Apache HBasecon 峰会来北京了，速来免费报名
  3. 朱峰谈概念设计（四）：游戏和电影的不同
  4. 【UE灯光•简介】UE4光照类型和灯光参数
  5. Java面试题 Java如何进行高效的数组拷贝？【Arrays.copyOf()】
  6. ASP.NET Core微服务(七)——【docker部署linux上线】(RDS+API接口测试部分)
  7. Expdp/Impdp 并行导入导出详细测试
  8. oracle ORA-14452错误处理
  9. 注释和简单用户交互程序
  10. Spring和Struts2整合