css实现loading动画非常方便，也非常实用

第一种

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .loading1{

            width:50px;

            height:40px;

            margin:60px auto;

            text-align:center;

        }

        .loading1 span{

            width:5px;

            height:100%;

            display:inline-block;

            background:#67CF22;;

            animation: mymove 1.2s infinite ease-in-out;

            -webkit-animation:mymove 1.2s infinite ease-in-out;

             /*

                mymove代表动画名字

                1.2s代表执行时间

                infinite表示一直循环执行

                ease-in-out表示先慢后快的缓动

            */

        }

        .loading1 >span:nth-child(2){

            -webkit-animation-delay:-1.0s;

            animation-delay:-1.0s;

        }

        .loading1 >span:nth-child(3){

            -webkit-animation-delay:-0.9s;

            animation-delay:-0.9s;

        }

        .loading1 >span:nth-child(4){

            -webkit-animation-delay:-0.8s;

            animation-delay:-0.8s;

        }

        .loading1 >span:nth-child(5){

            -webkit-animation-delay:-0.7s;

            animation-delay:-0.7s;

        }

        @keyframes mymove{

            0%{transform:scaleY(0.4);}

            25%{transform:scaleY(1.0);}

            50%{transform:scaleY(0.4);}

            75%{transform:scaleY(0.4);}

            100%{transform:scaleY(0.4);}

        }

        @-webkit-keyframes mymove{

            0%{transform:scaleY(0.4);}

            25%{transform:scaleY(1.0);}

            50%{transform:scaleY(0.4);}

            75%{transform:scaleY(0.4);}

            100%{transform:scaleY(0.4);}

        }

    </style>

</head>

<body>

 <div class="loading1">

     <span></span>

     <span></span>

     <span></span>

     <span></span>

     <span></span>

 </div>

</body>

</html>

第二种

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .loading2{

            width:50px;

            height:50px;

            margin:50px auto;

            position:relative;

        }

        .bounce{

            position:absolute;

            top:0;

            left:0;

            width:100%;

            height:100%;

            border-radius: 50%;

            background-color: #67CF22;

            opacity: 0.6;

            -webkit-animation: bounce 2.0s infinite ease-in-out;

            animation: bounce 2.0s infinite ease-in-out;

        }

        .bounce2{

            -webkit-animation-delay: -1.0s;

            animation-delay: -1.0s;

        }

        @keyframes bounce{

            0%{transform:scale(0.0);}

            50%{transform:scale(1.0);}

            100%{transform:scale(0.0);}

        }

        @-webkit-keyframes  bounce{

            0%{transform:scale(0.0);}

            50%{transform:scale(1.0);}

            100%{transform:scale(0.0);}

        }

    </style>

</head>

<body>

 <div class="loading2">

    <div class="bounce bounce1"></div>

    <div class="bounce bounce2"></div>

 </div>

</body>

</html>

第三种

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .loading3{

            width:30px;

            height:30px;

            margin:50px auto;

            position:relative;

        }

        .circle{

            position:absolute;

            top:0;

            left:0;

            width:100%;

            height:100%;

        }

        .circle span{

            width:8px;

            height:8px;

            display:inline-block;

            background:#67CF22;

            border-radius: 100%;

            position:absolute;

            -webkit-animation: mycircle 1.2s infinite ease-in-out;

            animation: mycircle 1.2s infinite ease-in-out;

            -webkit-animation-fill-mode:both;

            animation-fill-mode:both;

        }

       .circle2{

           -webkit-transform: rotateZ(45deg);

           transform: rotateZ(45deg);

       }

       .circle3{

           -webkit-transform: rotateZ(90deg);

           transform: rotateZ(90deg);

       }

       .circle>span:nth-child(1){

            top:0;

            left:0;

       }

       .circle>span:nth-child(2){

            top:0;

            right:0;

       }

       .circle>span:nth-child(3){

            right:0;

            bottom:0;

       }

       .circle>span:nth-child(4){

            left:0;

            bottom:0;

       }

       .circle2 >span:nth-child(1){

            -webkit-animation-delay: -1.1s;

            animation-delay: -1.1s;

       }

       .circle3 >span:nth-child(1){

            -webkit-animation-delay: -1.0s;

            animation-delay: -1.0s;

       }

       .circle1 >span:nth-child(2){

            -webkit-animation-delay: -0.9s;

            animation-delay: -0.9s;

       }

       .circle2 >span:nth-child(2){

            -webkit-animation-delay: -0.8s;

            animation-delay: -0.8s;

       }

       .circle3 >span:nth-child(2){

            -webkit-animation-delay: -0.7s;

            animation-delay: -0.7s;

       }

       .circle1 >span:nth-child(3){

            -webkit-animation-delay: -0.6s;

            animation-delay: -0.6s;

       }

       .circle2 >span:nth-child(3){

            -webkit-animation-delay: -0.7s;

            animation-delay: -0.7s;

       }

       .circle3 >span:nth-child(3){

            -webkit-animation-delay: -0.4s;

            animation-delay: -0.4s;

       }

       .circle1 >span:nth-child(4){

            -webkit-animation-delay: -0.3s;

            animation-delay: -0.3s;

       }

       .circle2 >span:nth-child(4){

            -webkit-animation-delay: -0.2s;

            animation-delay: -0.2s;

       }

       .circle3 >span:nth-child(4){

            -webkit-animation-delay: -0.1s;

            animation-delay: -0.1s;

       }

       @-webkit-keyframes mycircle{

            0%{transform:scale(0.0);}

            40%{transform:scale(1.0);}

            80%{transform:scale(0.0);}

            100%{transform:scale(0.0);}

        }

        @keyframes mycircle{

            0%{transform:scale(0.0);}

            40%{transform:scale(1.0);}

            80%{transform:scale(0.0);}

            100%{transform:scale(0.0);}

        }

    </style>

</head>

<body>

 <div class="loading3">

    <div class="circle circle1">

        <span></span>

        <span></span>

        <span></span>

        <span></span>

    </div>

    <div class="circle circle2">

        <span></span>

        <span></span>

        <span></span>

        <span></span>

    </div>

    <div class="circle circle3">

        <span></span>

        <span></span>

        <span></span>

        <span></span>

    </div>

 </div>

</body>

</html>

第四种

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .loading4{

            width:150px;

            margin:50px auto;

            text-align: center;

        }

        .loading4 >div{

          width: 18px;

          height: 18px;

          border-radius: 100%;

          display:inline-block;

          background-color: #67CF22;

          -webkit-animation: three 1.4s infinite ease-in-out;

          animation: three 1.4s infinite ease-in-out;

          -webkit-animation-fill-mode: both;

          animation-fill-mode: both;

        }

        .loading4 .three1{

          -webkit-animation-delay: -0.30s;

          animation-delay: -0.30s;

        }

        .loading4 .three2{

          -webkit-animation-delay: -0.15s;

          animation-delay: -0.15s;

        }

        @-webkit-keyframes three {

          0%, 80%, 100% {-webkit-transform: scale(0.0) }

          40% { -webkit-transform: scale(1.0) }

        }

        @keyframes three {

          0%, 80%, 100% {-webkit-transform: scale(0.0) }

          40% { -webkit-transform: scale(1.0) }

        }

    </style>

</head>

<body>

 <div class="loading4">

    <div class="three1"></div>

    <div class="three2"></div>

    <div class="three3"></div>

 </div>

</body>

</html>

Css3实现常用的几种loading动画的更多相关文章

  1. CSS实现四种loading动画效果

    四种loading加载效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. css3实现的三种loading动画（转载）

    收藏了: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  3. 分享web前端七款HTML5 Loading动画特效集锦

    以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...

  4. 10种CSS3实现的loading动画，挑一个走吧？

    这篇文章主要介绍了10种CSS3实现的loading动画,帮助大家更好的美化自身网页,完成需求,感兴趣的朋友可以了解下. HTML: 1 <body> 2 <div class=&q ...

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

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

  6. CSS3实现10种Loading效果（转）

    CSS3实现10种Loading效果  原文地址:http://www.cnblogs.com/jr1993/p/4622039.html 昨晚用CSS3实现了几种常见的Loading效果,虽然很简单 ...

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

    CSS3实现8种Loading效果[二]   今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! 第一种效果: 代码如下: < ...

  8. 【常见】CSS3进度条Loading动画

    现在,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.CSS3的崛起,更使得动态效果得以轻松实现,未来,必定是CSS3的天下,所以今天我就来分享一下几个常见的CSS3进度条Loadi ...

  9. 纯css3 加载loading动画特效

    最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

随机推荐

  1. Jenkins Jfrog Artifactory 以及docker下的pipeline 容器编排实践

    1. 测试环境情况: Docker主机 10.24.101.99 JFrog Artifactory 主机 (admin password) jenkinx github原始地址:https://gi ...

  2. [日常工作]Oracle新增数据文件的小知识点

    1. 表空间是small file tablespace的 然后数据文件长到了32g左右之后无法再次扩充, 应用报错了 为了性能和最快的处理 使用语句 alter tablespace user ad ...

  3. CSS 居中（拿来主义自用）

    居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...

  4. SOC四大弱点分析

    导读 今年的年度安全运营中心(SOC)调查中,SANS研究所指出了4个最为常见的SOC弱点.这些弱点的根源可被追溯到我们非常熟悉的人.过程.适度规划和技术实现上.下面我们就来看看SOC的四大弱点究竟是 ...

  5. python系列-3 pyenv的使用

    安装: git clone https://github.com/yyuu/pyenv.git ~/.pyenv echo 'export PYENV_ROOT="$HOME/.pyenv& ...

  6. BZOJ3307雨天的尾巴——线段树合并

    题目描述 N个点,形成一个树状结构.有M次发放,每次选择两个点x,y对于x到y的路径上(含x,y)每个点发一袋Z类型的物品.完成所有发放后,每个点存放最多的是哪种物品. 输入 第一行数字N,M接下来N ...

  7. MT【239】离心率最大

    已知点$A$为椭圆$\dfrac{x^2}{a^2}+\dfrac{y^2}{b^2}=1(a>b>0)$的左顶点,$O$为坐标原点,过椭圆的右焦点$F$作垂直于$x$轴的直线$l$.若直 ...

  8. 8bit数据 转换为 16bit数据的四种方法

    [转]玩转嵌入式(公众号) 在入门单片机时,想必大家都都会遇到一下这种情况 unsigned char a = 0x12; unsigned char b = 0x34; unsigned int c ...

  9. NOIp2017D2T2(luogu3959) 宝藏 (状压dp)

    时隔多年终于把这道题锅过了 数据范围显然用搜索剪枝状压dp. 可以记还有哪些点没到(或者已到了哪些点).我们最深已到的是哪些点.这些点的深度是多少,然后一层一层地往下推. 但其实是没必要记最深的那一层 ...

  10. 【bzoj1507】 JSOI2008—Blue Mary的旅行

    http://www.lydsy.com/JudgeOnline/problem.php?id=1570 (题目链接) 题意 给出$m$个航班,每天只能做一次飞机,有$T$人从起点到终点,问最晚到达的 ...