四种loading加载效果：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>四种加载效果</title>
  6. <style>
  7. /*第一种*/
  8. .demo1 {
  9.     width: 4px;
  10.     height: 4px;
  11.     border-radius: 2px;
  12.     background: #68b2ce;
  13.     float: left;
  14.     margin:  3px;
  15.     animation: demo1 linear 1s infinite;
  16.     -webkit-animation: demo1 linear 1s infinite;
  17. }
  18. .demo1:nth-child(){
  19.     animation-delay:0s;
  20. }
  21. .demo1:nth-child(){
  22.     animation-delay:.15s;
  23. }
  24. .demo1:nth-child(){
  25.     animation-delay:.3s;
  26. }
  27. .demo1:nth-child(){
  28.     animation-delay:.45s;
  29. }
  30. .demo1:nth-child(){
  31.     animation-delay:.6s;
  32. }
  33. @keyframes demo1{
  34.     %,%,% {transform: scale();}
  35.     % {transform: scale(2.5);}
  36. }
  37. @-webkit-keyframes demo1{
  38.     %,%,% {transform: scale();}
  39.     % {transform: scale(2.5);}
  40. }
  41. /*第二种*/
  42. .demo2 {
  43.     width: 4px;
  44.     height: 6px;
  45.     background: #68b2ce;
  46.     float: left;
  47.     margin:  3px;
  48.     animation: demo2 linear 1s infinite;
  49.     -webkit-animation: demo2 linear 1s infinite;
  50. }
  51. .demo2:nth-child(){
  52.     animation-delay:0s;
  53. }
  54. .demo2:nth-child(){
  55.     animation-delay:.15s;
  56. }
  57. .demo2:nth-child(){
  58.     animation-delay:.3s;
  59. }
  60. .demo2:nth-child(){
  61.     animation-delay:.45s;
  62. }
  63. .demo2:nth-child(){
  64.     animation-delay:.6s;
  65. }
  66. @keyframes demo2{
  67.     %,%,% {transform: scale();}
  68.     % {transform: scaleY();}
  69. }
  70. @-webkit-keyframes demo2{
  71.     %,%,% {transform: scale();}
  72.     % {transform: scaleY();}
  73. }
  74. /*第三种*/
  75. #loading3 {
  76.     position: relative;
  77.     width: 50px;
  78.     height: 50px;
  79. }
  80. .demo3 {
  81.     width: 4px;
  82.     height: 4px;
  83.     border-radius: 2px;
  84.     background: #68b2ce;
  85.     position: absolute;
  86.     animation: demo3 linear .8s infinite;
  87.     -webkit-animation: demo3 linear .8s infinite;
  88. }
  89. .demo3:nth-child(){
  90.     left: 24px;
  91.     top: 2px;
  92.     animation-delay:0s;
  93. }
  94. .demo3:nth-child(){
  95.     left: 40px;
  96.     top: 8px;
  97.     animation-delay:.1s;
  98. }
  99. .demo3:nth-child(){
  100.     left: 47px;
  101.     top: 24px;
  102.     animation-delay:.1s;
  103. }
  104. .demo3:nth-child(){
  105.     left: 40px;
  106.     top: 40px;
  107.     animation-delay:.2s;
  108. }
  109. .demo3:nth-child(){
  110.     left: 24px;
  111.     top: 47px;
  112.     animation-delay:.4s;
  113. }
  114. .demo3:nth-child(){
  115.     left: 8px;
  116.     top: 40px;
  117.     animation-delay:.5s;
  118. }
  119. .demo3:nth-child(){
  120.     left: 2px;
  121.     top: 24px;
  122.     animation-delay:.6s;
  123. }
  124. .demo3:nth-child(){
  125.     left: 8px;
  126.     top: 8px;
  127.     animation-delay:.7s;
  128. }
  129. @keyframes demo3{
  130.     %,%,% {transform: scale();}
  131.     % {transform: scale();}
  132. }
  133. @-webkit-keyframes demo3{
  134.     %,%,% {transform: scale();}
  135.     % {transform: scale();}
  136. }
  137. /*第四种*/
  138. #loading5 {
  139.     width: 20px;
  140.     height: 100px;
  141.     border-bottom: 1px solid #68b2ce;
  142. }
  143. .demo5 {
  144.     width: 20px;
  145.     height: 20px;
  146.     border-radius: 10px;
  147.     background: #68b2ce;
  148.     animation: demo5 cubic-bezier(0.5,0.01,0.9,) .6s infinite alternate;
  149.     -webkit-animation: demo5 cubic-bezier(0.5,0.01,0.9,) .6s infinite alternate;
  150. }
  151. @keyframes demo5{
  152.     %{
  153.         transform:translateY(0px);
  154.         -webkit-transform:translateY(0px);
  155.     }
  156.     %{
  157.         transform:translateY(80px);
  158.         -webkit-transform:translateY(80px);
  159.     }
  160. }
  161. @-webkit-keyframes demo5{
  162.     %{
  163.         transform:translateY(0px);
  164.         -webkit-transform:translateY(0px);
  165.     }
  166.     % {
  167.         transform:translateY(80px);
  168.         -webkit-transform:translateY(80px);
  169.     }
  170. }
  171. </style>
  172. <body>
  173.     <div id="loading1">
  174.         <div class="demo1"></div>
  175.         <div class="demo1"></div>
  176.         <div class="demo1"></div>
  177.         <div class="demo1"></div>
  178.         <div class="demo1"></div>
  179.     </div>
  180.     <div id="loading2">
  181.         <div class="demo2"></div>
  182.         <div class="demo2"></div>
  183.         <div class="demo2"></div>
  184.         <div class="demo2"></div>
  185.         <div class="demo2"></div>
  186.     </div>
  187.     <div id="loading3">
  188.         <div class="demo3"></div>
  189.         <div class="demo3"></div>
  190.         <div class="demo3"></div>
  191.         <div class="demo3"></div>
  192.         <div class="demo3"></div>
  193.         <div class="demo3"></div>
  194.         <div class="demo3"></div>
  195.         <div class="demo3"></div>
  196.     </div>
  197.     <div id="loading5">
  198.         <div class="demo5"></div>
  199.     </div>
  200. </body>
  201. </html>

CSS实现四种loading动画效果的更多相关文章

  1. 实现loading动画效果

    下面我就来罗列三种实现loading动画效果的方法. 方法一:使用UIImageView自带的方法来实现,这也是我推荐的实现方法. NSMutableArray *array = [[NSMutabl ...

  2. ios开发之简单实现loading动画效果

    最近有朋友问我类似微信语音播放的喇叭动画和界面图片加载loading界面是怎样实现的,是不是就是一个gif图片呢!我的回答当然是否定了,当然不排除也有人用gif图片啊!下面我就来罗列三种实现loadi ...

  3. 《网页设计基础——CSS的四种引入方式详解》

    网页设计基础--CSS的四种引入方式详解     一.行内式:   规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中.   格 ...

  4. jQuery10种不同动画效果的响应式全屏遮罩层

    遮罩层有很多今天介绍这个jQuery10种不同动画效果的响应式全屏遮罩层 效果预览 下载地址 实例代码 <div class="container"> <head ...

  5. 简单css实现input提示交互动画效果

    通过基础CSS实现输入提示交互动画效果,并兼容各浏览器! 1.效果展示 2.css代码 h4 { margin: 30px 0; } input { margin:; font-size: 16px; ...

  6. Atitit Loading 动画效果

    Atitit Loading 动画效果 使用才场景,加载数据,以及显示警告灯.. 要有手动关闭按钮 <div class="spinner loading_part" sty ...

  7. 页面中CSS的四种引入方式的介绍与比较

    转自:https://blog.csdn.net/qq_38689666/article/details/79039392 一:行内式 <p style="color:red" ...

  8. [Swift通天遁地]五、高级扩展-(11)图像加载Loading动画效果的自定义和缓存

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  9. Westciv Tools主要为CSS3提供了渐变gradients、盒子阴影box-shadow、变形transform和文字描边四种在线生成效果的工具

    Westciv Tools主要为CSS3提供了渐变gradients.盒子阴影box-shadow.变形transform和文字描边四种在线生成效果的工具 1.Westciv Tools 彩蛋爆料直击 ...

随机推荐

  1. Python小程序之sed命令替换

    需求: 编写sed命令脚本 代码如下 # Author:Lee Sir import sys,os des_file = r'E:\StartPython\day3\test.txt' des_fil ...

  2. unicode字符串解码显示

    # encoding: utf-8 ''' unicode字符串解码显示 ''' import sys reload(sys) sys.setdefaultencoding('utf-8') a = ...

  3. 使用MXNet远程编写卷积神经网络用于多标签分类

    最近试试深度学习能做点什么事情.MXNet是一个与Tensorflow类似的开源深度学习框架,在GPU显存利用率上效率高,比起Tensorflow显著节约显存,并且天生支持分布式深度学习,单机多卡.多 ...

  4. Centos 7.2 双网卡绑定之踩坑

    线上服务器,安装centos7.2 x64最小化安装,需要做链路聚合,双网卡绑定.在centos 6.x 和 centos 7上测试都OK,于是直接开搞. 说明下,以下环境是在虚拟机中实现的: 系统: ...

  5. Selenium2+python自动化58-读取Excel数据（xlrd）【转载】

    前言 当登录的账号有多个的时候,我们一般用excel存放测试数据,本节课介绍,python读取excel方法,并保存为字典格式. 一.环境准备 1.先安装xlrd模块,打开cmd,输入pip inst ...

  6. python的上下文管理（context）（1）

    本文转载自:http://blog.csdn.net/G_66_hero/article/details/53048540 什么是Python中的上下文管理器 怎么使用上下文管理器 如何创建自己的上下 ...

  7. ThreadLocal深度解析

    本文基于jdk1.8.0_66写成 0. ThreadLocal简介 ThreadLocal可以提供线程内的局部对象,合理的使用可以避免线程冲突的问题比方说SimpleDateFormat是线程不安全 ...

  8. selenium 定位

    一 . chrome的调试工具 1)在chrome界面,按F12快捷键,弹出chrome的调试工具 2)找出登录按钮的id和username.password的id  二．XPath工具 安装 为了提 ...

  9. xunsearch如何按照ID排序

    你ini再建一个字段id_tmp 类型type=numeric 重建索引的时候 数据源 加一个主键id的别名 id, id as id_tmp 排序的时候按照id_tmp排序

  10. uva658（最短路径+隐式图+状态压缩）

    题目连接(vj):https://vjudge.net/problem/UVA-658 题意:补丁在修正 bug 时,有时也会引入新的 bug.假定有 n(n≤20)个潜在 bug 和 m(m≤100 ...