1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. </head>
  7. <style type="text/css">
  8. .box {
  9. width: 100%;
  10. padding: 3%;
  11. box-sizing: border-box;
  12. overflow: hidden
  13. }
  14.  
  15. .box .loader {
  16. width: 30%;
  17. float: left;
  18. height: 200px;
  19. margin-right: 3%;
  20. border: 1px #ccc solid;
  21. box-sizing: border-box;
  22. display: flex;
  23. align-items: center;
  24. justify-content: center
  25. }
  26.  
  27. @-webkit-keyframes loading-1 {
  28. 0% {
  29. transform: rotate(0deg)
  30. }
  31. 50% {
  32. transform: rotate(180deg)
  33. }
  34. 100% {
  35. transform: rotate(360deg)
  36. }
  37. }
  38.  
  39. .loading-1 {
  40. width: 35px;
  41. height: 35px;
  42. position: relative
  43. }
  44.  
  45. .loading-1 i {
  46. display: block;
  47. width: 100%;
  48. height: 100%;
  49. border-radius: 50%;
  50. background: linear-gradient(transparent 0, transparent 70%, #333 30%, #333 100%);
  51. -webkit-animation: loading-1 .6s linear 0s infinite
  52. }
  53.  
  54. @-webkit-keyframes loading-2 {
  55. 0% {
  56. transform: scaleY(1)
  57. }
  58. 50% {
  59. transform: scaleY(.4)
  60. }
  61. 100% {
  62. transform: scaleY(1)
  63. }
  64. }
  65.  
  66. .loading-2 i {
  67. display: inline-block;
  68. width: 4px;
  69. height: 35px;
  70. border-radius: 2px;
  71. margin: 0 2px;
  72. background-color: #333
  73. }
  74.  
  75. .loading-2 i:nth-child(1) {
  76. -webkit-animation: loading-2 1s ease-in .1s infinite
  77. }
  78.  
  79. .loading-2 i:nth-child(2) {
  80. -webkit-animation: loading-2 1s ease-in .2s infinite
  81. }
  82.  
  83. .loading-2 i:nth-child(3) {
  84. -webkit-animation: loading-2 1s ease-in .3s infinite
  85. }
  86.  
  87. .loading-2 i:nth-child(4) {
  88. -webkit-animation: loading-2 1s ease-in .4s infinite
  89. }
  90.  
  91. .loading-2 i:nth-child(5) {
  92. -webkit-animation: loading-2 1s ease-in .5s infinite
  93. }
  94.  
  95. @-webkit-keyframes loading-3 {
  96. 50% {
  97. transform: scale(.4);
  98. opacity: .3
  99. }
  100. 100% {
  101. transform: scale(1);
  102. opacity: 1
  103. }
  104. }
  105.  
  106. .loading-3 {
  107. position: relative
  108. }
  109.  
  110. .loading-3 i {
  111. display: block;
  112. width: 15px;
  113. height: 15px;
  114. border-radius: 50%;
  115. background-color: #333;
  116. position: absolute
  117. }
  118.  
  119. .loading-3 i:nth-child(1) {
  120. top: 25px;
  121. left: 0;
  122. -webkit-animation: loading-3 1s ease 0s infinite
  123. }
  124.  
  125. .loading-3 i:nth-child(2) {
  126. top: 17px;
  127. left: 17px;
  128. -webkit-animation: loading-3 1s ease -.12s infinite
  129. }
  130.  
  131. .loading-3 i:nth-child(3) {
  132. top: 0;
  133. left: 25px;
  134. -webkit-animation: loading-3 1s ease -.24s infinite
  135. }
  136.  
  137. .loading-3 i:nth-child(4) {
  138. top: -17px;
  139. left: 17px;
  140. -webkit-animation: loading-3 1s ease -.36s infinite
  141. }
  142.  
  143. .loading-3 i:nth-child(5) {
  144. top: -25px;
  145. left: 0;
  146. -webkit-animation: loading-3 1s ease -.48s infinite
  147. }
  148.  
  149. .loading-3 i:nth-child(6) {
  150. top: -17px;
  151. left: -17px;
  152. -webkit-animation: loading-3 1s ease -.6s infinite
  153. }
  154.  
  155. .loading-3 i:nth-child(7) {
  156. top: 0;
  157. left: -25px;
  158. -webkit-animation: loading-3 1s ease -.72s infinite
  159. }
  160.  
  161. .loading-3 i:nth-child(8) {
  162. top: 17px;
  163. left: -17px;
  164. -webkit-animation: loading-3 1s ease -.84s infinite
  165. }
  166.  
  167. </style>
  168. <body>
  169. <div class="box">
  170. <div class="loader">
  171. <div class="loading-1">
  172. <i></i>
  173. </div>
  174. </div>
  175.  
  176. <div class="loader">
  177. <div class="loading-2">
  178. <i></i>
  179. <i></i>
  180. <i></i>
  181. <i></i>
  182. <i></i>
  183. </div>
  184. </div>
  185.  
  186. <div class="loader">
  187. <div class="loading-3">
  188. <i></i>
  189. <i></i>
  190. <i></i>
  191. <i></i>
  192. <i></i>
  193. <i></i>
  194. <i></i>
  195. <i></i>
  196. </div>
  197. </div>
  198. </div>
  199. </body>
  200. </html>

 

css3 loading 效果的更多相关文章

  1. HTML5+CSS3 loading 效果收集--转载

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

  2. CSS3 loading效果全

    梦想天空 关注前端开发技术 ◆ 推动 HTML5 & CSS3 技术发展 ◆ 本博客全新站点:yyyweb.com 欢迎围观:) 首页 管理 订阅 网页设计 JavaScript jQuery ...

  3. html5 css3 loading 效果

    canvas  html5load1 主要思路update  实现12个点的绘制和旋转效果 var update = function() { ctx.save();// 把当前绘图状态保存起来 ct ...

  4. css3 loading效果

    file:///E:/zhangqiangWork/2014/SPDbank/index.html 参考该网站 http://tobiasahlin.com/spinkit/ 查看源代码把里面的dom ...

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

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

  6. CSS3轻松实现清新 Loading 效果

    至今HTML5中国已经为大家分享过几百种基于 CSS3 的Loading加载动画,效果酷炫代码简洁,非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例. 第一种效果: HTM ...

  7. CSS3实现10种Loading效果

    昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… 第1种效果: 代码如下: <div class="loading"> ...

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

    原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊 ...

  9. 用CSS3实现饼状loading效果

    原文地址:http://visugar.com/2017/05/17/CSS3%E9%A5%BC%E7%8A%B6loading%E6%95%88%E6%9E%9C/ 写在前面 (附录有源码及效果) ...

随机推荐

  1. STRTOK函数和STRTOK_R函数

    STRTOK函数和STRTOK_R函数 注:本文转载自博客园,感谢作者整理! 1.一个应用实例 网络上一个比较经典的例子是将字符串切分,存入结构体中.如,现有结构体 typedef struct pe ...

  2. 树莓派进阶之路 (021) - 3.2inch RPi LCD (B)

    参考文档:http://www.waveshare.net/wiki/3.2inch_RPi_LCD_(B) 产品特点 320x240分辨率 电阻式触摸控制 兼容并可直接插入任何版本树莓派 提供Ras ...

  3. linux达人养成计划学习笔记(六)—— 挂载命令

    一.查询与自动挂载 mount #查询系统中已挂载的设备 mount -a #根据配置文件/etc/fstab的内容,自动挂载 二.挂载命令格式 mount [-t 文件系统] [-o 特殊选项] 设 ...

  4. sql 2005出现错误:数据库 'Twitter' 的事务日志已满。若要查明无法重用日志中的空间的原因,请参阅 sys.databases 中的 log_reuse_wait_desc 列。

    --先备份数据库 --截断事务日志 backup   log   Twitter with   no_loggo --收缩数据库 dbcc   shrinkdatabase(Twitter) go O ...

  5. FluentValidation:C#后端输入验证框架的官方文档解读

    参照 FluentValidation 的官方文档写的例子,方便日后查看和使用. 原文:https://github.com/JeremySkinner/FluentValidation/wiki H ...

  6. Docker LNMP环境搭建

    原文地址:https://www.awaimai.com/2120.html 1 快速使用 2 安装docker和docker-compose 3 使用国内镜像仓库 4 目录说明 4.1 目录结构 4 ...

  7. Config程序配置文件操作实践进阶之ConfigurationSectionGroup

    今天又进一步对System.Configuration下的ConfigurationSectionGroup类及相关的类与方法进行了研究.发现要构建多层次嵌套的XML标签 则必须用到Configura ...

  8. win7怎么快速截取图片

    点击开始--运行或者winkey + r 键直接进入运行. 2 在输入框输入snippingtool,点击确定. 3 这就找到截图工具,如图. END 方法/步骤2   进入c盘--Windows-- ...

  9. Bitnami Redmine 中文附件名 报错修复

    最近自己在服务器上搭了个redmine,用的是Bitnami的一键安装程序. 搭好后,运行得不错,居然还增加了负载均衡. 某天上传中文附件,打开报内部错误,去redmine官网看了下,果然有这个问题, ...

  10. 还没被玩坏的robobrowser(2)——安装及快速开始

    安装robobrowser 注意:这里假设你知道如何使用pip安装python的库的知识,如果你不了解这一块的话,点这里获取帮助. 强烈推荐使用pip安装. pip install robobrows ...