zoukankan      html  css  js  c++  java
  • CSS3扇形进度效果

    .coutdown-animate {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 50%;
        opacity: 0.3;
        &:before {
          content: "";
          display: block;
          margin-left: 50%;
          height: 100%;
          background-color: inherit;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 0 50px 50px 0;
          transform-origin: left;
        }
        &.animate {
          background: #000;
          background-image: linear-gradient(to right, transparent 50%, #9acd32 0);
          &:before{
            animation: spin 1.5s linear infinite, bg 3s step-end infinite;
          }
        }
      }
     
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(180deg);
      }
    }
    @keyframes bg {
      50% {
        background: #9acd32;
      }
    }
     
  • 相关阅读:
    Codeforces Round #171 (Div. 2)
    ACdream 1079 郭式树
    HDOJ 1517 博弈论
    ACdream 1080 面面数
    博弈论 Nim 博弈
    Codeforces Round #172 (Div. 2)
    ACdream 1084 同心树
    STL bitset
    博弈论 bash博弈
    POJ 3261 后缀数组
  • 原文地址:https://www.cnblogs.com/hutuzhu/p/11758411.html
Copyright © 2011-2022 走看看