• 三个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>

    效果如图:

  • 相关阅读:
    Linux下部署svn服务
    eclipse3.3.2在CentOS5.4下启动时崩溃的解决方法
    Cassandra配置
    Hadoop系列相关优秀网站收集
    ul li 制作导航栏 程序员
    一.Java访问权限饰词(access specifiers) 程序员
    Java程序员应该了解的10个面向对象设计原则 程序员
    MyEclipse里更改字体大小和快捷建的设置 程序员
    JFileChooser 为用户选择文件提供了一种简单的机制 程序员
    JavaScript时间函数总结 程序员
  • 原文地址:https://www.cnblogs.com/xianhaiyuan/p/5184841.html
Copyright © 2020-2023  润新知