首页 > Web开发 > 详细

CSS3扇形进度效果

时间:2019-10-29 15:29:39      阅读:154      评论:0      收藏:0      [点我收藏+]
.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;
  }
}
 
技术分享图片

CSS3扇形进度效果

原文:https://www.cnblogs.com/hutuzhu/p/11758411.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!