Css3实现常用的几种loading动画

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动画的更多相关文章

CSS实现四种loading动画效果
四种loading加载效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
css3实现的三种loading动画（转载）
收藏了: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
分享web前端七款HTML5 Loading动画特效集锦
以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...
10种CSS3实现的loading动画，挑一个走吧？
这篇文章主要介绍了10种CSS3实现的loading动画,帮助大家更好的美化自身网页,完成需求,感兴趣的朋友可以了解下. HTML: 1 <body> 2 <div class=&q ...
CSS3实现8种Loading效果【第二波】
原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊 ...
CSS3实现10种Loading效果（转）
CSS3实现10种Loading效果原文地址:http://www.cnblogs.com/jr1993/p/4622039.html 昨晚用CSS3实现了几种常见的Loading效果,虽然很简单 ...
CSS3实现8种Loading效果【二】
CSS3实现8种Loading效果[二] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! 第一种效果: 代码如下: < ...
【常见】CSS3进度条Loading动画
现在,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.CSS3的崛起,更使得动态效果得以轻松实现,未来,必定是CSS3的天下,所以今天我就来分享一下几个常见的CSS3进度条Loadi ...
纯css3 加载loading动画特效
最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

随机推荐

lumen或者laravel安装指定版本
方法一安装器安装:缺点不能安装指定版本 composer global require "laravel/lumen-installer" lumen new blog comp ...
ERP启动会
一个信念: 只许成功,不许失败. 二个原则: 第一个原则是“业务为主,IT为辅”的实施原则: 第二个原则是“循序渐进,持续改善”的工作原则. 三点要求: 第一点,各分公司.各部门的负责人要将ERP信息 ...
matplotlib绘图2
fig=plt.figure() fig.add_subplot(3,3,1)#3行3列第一个图 n=128 X=np.random.normal(0,1,n) Y=np.random.normal ...
D3.js v5 Tutorials
D3.js v5 Tutorials D3.js v5 教程 https://github.com/d3/d3/blob/master/API.md CHANGES https://github.co ...
JQuery从入门到精通
1.JQuery查找元素例:将表格的单元格中件数和重量差异不为0的数据标红代码如下: <style> .notice{ color: red; } .right{ color: gre ...
CSS实现垂直居中的5种思路
前面的话相对于水平居中,人们对于垂直居中略显为难,大部分原因是vertical-align不能正确使用.实际上,实现垂直居中也是围绕几个思路展开的.本文将介绍关于垂直居中的5种思路 line-hei ...
关于super的理解，三篇文章支撑起来的
1.有向图的拓扑排序https://blog.csdn.net/wp1603710463/article/details/50900892 2. Python中MRO算法 http://mp.weix ...
HDU4414-DFS
给一个图,寻找十字交叉的个数,十字交叉应为两个大于3的奇数交叉与正中央.图的大小很小. 使用DFS搜八连块,之后按照规则筛选出符合条件的交叉. 我的筛选规则有点蠢,先将点排序,再通过三段for循环判断 ...
day24 包
# 把解决一类问题的模块会被放在一个文件夹里面,即包 # import os # os.makedirs('glance/api') # os.makedirs('glance/cmd') # os. ...
MT【32】内外圆(Apollonius Circle）的几何证明
另一方面,如果 M 满足(1)式,那么M必然在以PQ为直径的圆上.事实上当M为P或者Q时,这是显然的.当M异于P,Q时,由$\frac{|MB|}{|MC|}=\frac{|PB|}{|PC|}=\l ...

Css3实现常用的几种loading动画

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

随机推荐

热门专题