zoukankan      html  css  js  c++  java
  • css3实现进度条

    HTML 结构很简单,但不是 Single Element:

    <div class="spinner"><i></i></div>
    

      

    外层元素 .spinner 负责显示底部的半透明圆环:

    .spinner {
        font-size: 20px;
         1em;
        height: 1em;
        border-radius: 50%;
        box-shadow: inset 0 0 0 .1em rgba(58, 168, 237, .2);
    }
    

      

    .spinner 里的 i 元素被裁剪(clip)了一半,并做 0° 至 180° 的顺时钟旋转:

    .spinner i {
        position: absolute;
        clip: rect(0, 1em, 1em, .5em);
         1em;
        height: 1em;
        animation: spinner-circle-clipper 1s ease-in-out infinite;
    }
    
    @keyframes spinner-circle-clipper {
        0% {
            transform: rotate(0deg);
        }
    
        100% {
            transform: rotate(180deg);
        }
    }
    

      

    i 的 :after 伪元素同样被裁减了一半,并做 -180° 至 180° 的顺时钟旋转:

    .spinner i:after {
        position: absolute;
        clip: rect(0, 1em, 1em, .5em);
         1em;
        height: 1em;
        content: '';
        animation: spinner-circle 1s ease-in-out infinite;
        border-radius: 50%;
        box-shadow: inset 0 0 0 .1em #3aa8ed;
    }
    
    @keyframes spinner-circle {
        0% {
            transform: rotate(-180deg);
        }
    
        100% {
            transform: rotate(180deg);
        }
    }
    

      

    通过 2 个元素不断旋转导致的角度差,配合裁剪就能实现平滑的圆环长度变化效果。

  • 相关阅读:
    PHP之简单实现MVC框架
    socket泄露的问题
    gdb 调试多线程
    MMAP和DIRECT IO区别
    三年回首:C基础
    定时器管理:nginx的红黑树和libevent的堆
    strsep和strtok_r替代strtok
    缓存穿透和缓存失效
    mmap为什么比read/write快(兼论buffercache和pagecache)
    B+Tree和MySQL索引分析
  • 原文地址:https://www.cnblogs.com/zwhbk/p/6163456.html
Copyright © 2011-2022 走看看