• 三个loading小动画实例


    直接贴代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <style type="text/css" media="screen">
            .box{
                 100%;
                padding: 3%;
                box-sizing: border-box;
                overflow: hidden;
            }
            .box .load{
                 30%;
                float: left;
                height: 200px;
                margin-right: 3%;
                border: 1px solid #ccc;
                box-sizing: border-box;

                display: flex;
                align-items: center;
                justify-content: center;
            }
            @-moz-keyframes loading1{            /*动画一*/
                0%{
                    transform:rotate(0deg);
                }
                50%{
                    transform:rotate(180deg);
                }
                100%{
                    transform:rotate(360deg);
                }
            }
            @-moz-keyframes loading2{            /*动画二*/
                0%{
                    transform:scaleY(1);
                }
                50%{
                    transform:scaleY(0.4);
                }
                100%{
                    transform:scaleY(1);
                }
            }
            @-moz-keyframes loading3{            /*动画三*/
                50%{
                    transform:scale(0.4);
                    opacity: 0.3;
                }
                100%{
                    transform:scale(1);
                    opacity: 1;
                }
            }
            .loading_1{
                 35px;
                height: 35px;
                position: relative;
            }
            .loading_1 i{
                display: block;
                 100%;
                height: 100%;
                border-radius: 50%;
                background: linear-gradient(transparent 0%,transparent 70%,#333 70%,#333 100%);
                -moz-animation:loading1 0.6s linear 0s infinite;
            }

            .loding_2{
                 80px;
                height: 80px;
                position: relative;
            }
            .loading_2 i{
                display: inline-block;
                 4px;
                height: 30px;
                background-color: #333;
                margin: 0 4px;
                border-radius: 10px;
            }
            .loading_2 i:nth-child(1){
                -moz-animation:loading2 1s ease-in 0.1s infinite;
            }
            .loading_2 i:nth-child(2){
                -moz-animation:loading2 1s ease-in 0.2s infinite;
            }
            .loading_2 i:nth-child(3){
                -moz-animation:loading2 1s ease-in 0.3s infinite;
            }
            .loading_2 i:nth-child(4){
                -moz-animation:loading2 1s ease-in 0.4s infinite;
            }
            .loading_2 i:nth-child(5){
                -moz-animation:loading2 1s ease-in 0.5s infinite;
            }
            
            .loading_3{
                position: relative;
            }
            .loading_3 i{
                display: block;
                 15px;
                height: 15px;
                border-radius: 50%;
                background-color: #666;
                position: absolute;
            }
            .loading_3 i:nth-child(1){
                top: 25px;
                left: 0;
                -moz-animation:loading3 1s ease-in 0s infinite;
            }
            .loading_3 i:nth-child(2){
                top: 17px;
                left: -17px;
                -moz-animation:loading3 1s ease-in 0.1s infinite;
            }
            .loading_3 i:nth-child(3){
                top: 0px;
                left: -25px;
                -moz-animation:loading3 1s ease-in 0.2s infinite;
            }
            .loading_3 i:nth-child(4){
                top: -17px;
                left: -17px;
                -moz-animation:loading3 1s ease-in 0.3s infinite;
            }
            .loading_3 i:nth-child(5){
                top: -25px;
                left: 0px;
                -moz-animation:loading3 1s ease-in 0.4s infinite;
            }
            .loading_3 i:nth-child(6){
                top: -17px;
                left: 17px;
                -moz-animation:loading3 1s ease-in 0.5s infinite;
            }
            .loading_3 i:nth-child(7){
                top: 0px;
                left: 25px;
                -moz-animation:loading3 1s ease-in 0.6s infinite;
            }
            .loading_3 i:nth-child(8){
                top: 17px;
                left: 17px;
                -moz-animation:loading3 1s ease-in 0.7s infinite;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="load">
                <div class="loading_1">
                    <i></i>
                </div>
            </div>
            <div class="load">
                <div class="loading_2">
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                </div>
            </div>
            <div class="load">
                <div class="loading_3">
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                </div>
            </div>
        </div>
    </body>
    </html>

    效果如图:

  • 相关阅读:
    Eclipse 3.3快捷键收藏
    如何全库搜索某一字符串?
    Velocity模板(VM)语言介绍1 (转载)
    Array与ArrayList用法及转换(转)
    LINQ to SQL语句之Select/Distinct和Count/Sum/Min/Max/Avg YJingLee's Blog 博客园(转)
    Javascript页面跳转代码搜集 (转)
    关于Linq的.distinct()方法的运用(一个简单的例子)
    劳动仲裁委员会的具体地址即(朝阳区酒仙桥南十里居28楼的具体路线)______转
    sql server 函数
    javascript接收get方式的参数 (转)
  • 原文地址:https://www.cnblogs.com/xianhaiyuan/p/5184841.html
Copyright © 2020-2023  润新知