zoukankan      html  css  js  c++  java
  • 圆形进度

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    #startmengban {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    100%;
    height: 100%;
    z-index: 999;
    background: rgba(0, 0, 0, 0.7);
    display: table;
    }

    #startmengban .center {
    display: table-cell;
    vertical-align: middle;
    }

    #startmengban h2 {
    text-align: center;
    color: #fff;
    font-size: 20px;
    font-weight: normal;
    margin: 0;
    margin-top: 35px;
    }

    .spinner {
    margin: 0px auto;
    55px;
    height: 55px;
    position: relative;
    }

    .container1 > div,
    .container2 > div,
    .container3 > div {
    15px;
    height: 15px;
    background-color: #fff;
    border-radius: 100%;
    position: absolute;
    -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
    animation: bouncedelay 1.2s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    }

    .spinner .spinner-container {
    position: absolute;
    100%;
    height: 100%;
    }

    .container2 {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
    }
    .container2{
    transform: rotateZ(45deg);
    }
    .container3 {
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
    }

    .circle1 {
    top: 0;
    left: 0;
    }

    .circle2 {
    top: 0;
    right: 0;
    }

    .circle3 {
    right: 0;
    bottom: 0;
    }

    .circle4 {
    left: 0;
    bottom: 0;
    }

    .container2 .circle1 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
    }

    .container3 .circle1 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
    }

    .container1 .circle2 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
    }

    .container2 .circle2 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
    }

    .container3 .circle2 { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .container1 .circle3 { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .container2 .circle3 { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .container3 .circle3 { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .container1 .circle4 { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .container2 .circle4 { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .container3 .circle4 { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } @-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0.0) } 40% { -webkit-transform: scale(1.0) } } @keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 40% { transform: scale(1.0); -webkit-transform: scale(1.0); } } </style></head><body><div id="startmengban" > <div class="center"> <div class="spinner"> <div class="spinner-container container1"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> <div class="spinner-container container2"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> <div class="spinner-container container3"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> </div> <h2>更新进度<span id="jindu" class="jindu">0%</span></h2> </div></div></body></html>
  • 相关阅读:
    Apache Spark 2.2.0 中文文档
    Apache Spark 2.2.0 中文文档
    Apache Spark 2.2.0 中文文档
    Apache Spark 2.2.0 中文文档
    Apache Spark 2.2.0 中文文档
    Apache Spark RDD(Resilient Distributed Datasets)论文
    Apache Spark 2.2.0 中文文档
    Apache Spark 2.2.0 中文文档
    【机器学习实战】第10章 K-Means(K-均值)聚类算法
    [译]flexbox全揭秘
  • 原文地址:https://www.cnblogs.com/peijunma/p/6090250.html
Copyright © 2011-2022 走看看