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;
      }
    }
     
  • 相关阅读:
    c# 字符串中某个词出现的次数及索引
    c# 冒泡排序
    WCF 高级知识
    Web Api基础知识
    Web Services基础知识
    WCF Demo
    IIS部署WCF常见错误
    IIS部署WCF
    IIS部署WCF错误
    WCF基础知识
  • 原文地址:https://www.cnblogs.com/hutuzhu/p/11758411.html
Copyright © 2011-2022 走看看