zoukankan      html  css  js  c++  java
  • css3实现loading动画效果

    最终的loading效果如图:

    说明:共两个层,每个层里有4个花瓣,共组成8个花瓣;动画过程为每个花瓣的透明度依次从1变为0的过程。

    HTML代码:

    <div class="loadingBox">
        <div class="loadingBox1">
            <div class="circle circle1"></div>
            <div class="circle circle2"></div>
            <div class="circle circle3"></div>
            <div class="circle circle4"></div>
        </div>
        <div class="loadingBox2">
            <div class="circle circle1"></div>
            <div class="circle circle2"></div>
            <div class="circle circle3"></div>
            <div class="circle circle4"></div>
        </div>    
    </div>

    CSS代码:

    <style type="text/css">
    .loadingBox{
        width:25px;
        height:25px;
        position:relative;
        margin:50px auto;    
    }
    .loadingBox1,.loadingBox2{width:100%; height:100%;position:absolute;}
    .loadingBox2{
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .circle{
        position:absolute;
        width:10px;
        height:10px;
        background:#333;    
        -webkit-animation:loading .8s infinite linear;
        -moz-animation:loading .8s infinite linear;
        -o-animation:loading .8s infinite linear;
        animation:loading .8s infinite linear;
    }
    .loadingBox2 .circle1{
        -webkit-animation-delay:0.1s;
        -moz-animation-delay:0.1s;
        animation-delay:0.1s;
    }
    
    .circle2{
        -webkit-animation-delay:0.2s;
        -moz-animation-delay:0.2s;
        animation-delay:0.2s;
    }
    .loadingBox2 .circle2{
        -webkit-animation-delay:0.3s;
        -moz-animation-delay:0.3s;
        animation-delay:0.3s;
    }
    .circle3{
        -webkit-animation-delay:0.4s;
        -moz-animation-delay:0.4s;
        animation-delay:0.4s;
    }
    .loadingBox2 .circle3{
        -webkit-animation-delay:0.5s;
        -moz-animation-delay:0.5s;
        animation-delay:0.5s;
    }
    .circle4{
        -webkit-animation-delay:0.6s;
        -moz-animation-delay:0.6s;
        animation-delay:0.6s;
    }
    .loadingBox2 .circle4{
        -webkit-animation-delay:0.7s;
        -moz-animation-delay:0.7s;
        animation-delay:0.7s;
    }
    
    .circle1{/*左上*/
        top:0;left:0;
        border-radius:0 10px;
    }
    .circle2{/*右上*/
        top:0;right:0;
        border-radius:10px 0;
    }
    .circle3{/*右下*/
        bottom:0;right:0;
        border-radius:0 10px;
    }
    .circle4{/*左下*/
        bottom:0; left:0;
        border-radius:10px 0;
    }
    @-webkit-keyframes loading{
        0%{
            opacity:1;
        }
        50%{
            opacity:0.5;
        }
        100%{
            opacity:0;
        }
    }
    @-moz-keyframes loading{
        0%{
            opacity:1;
        }
        50%{
            opacity:0.5;
        }
        100%{
            opacity:0;
        }
    }
    loading{
        0%{
            opacity:1;
        }
        50%{
            opacity:0.5;
        }
        100%{
            opacity:0;
        }
    }
    </style>
  • 相关阅读:
    最长什么什么子序列进阶(xym的hu测)
    樱花庄的宠物女孩AtCoder Grand Contest 015E
    樱花庄的宠物女孩AtCoder Grand Contest 015E
    boyne
    bzoj1001 [BeiJing2006]狼抓兔子
    95.自动注射
    94.文件bat脚本自删除
    93.下载器
    91.#pragma 详解
    91.生成ini文件并写入和读取ini文件
  • 原文地址:https://www.cnblogs.com/lch880/p/3571861.html
Copyright © 2011-2022 走看看