css 画饼图 倒计时圆圈

html

<div class="pie"></div>

css　

  .pie{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: yellowgreen;
    background-image: linear-gradient(to right,transparent 50%,#655 0);
  }
  @keyframes spin {
    to {transform: rotate(.5turn);}
  }
  @keyframes bg {
    50% {background: #655;}
  }
  .pie::before{
    content: '';
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background-color: inherit;
    transform-origin: left;
    animation: spin 5s linear infinite,
                bg 10s step-end infinite;

  }

成果图如下，设置的是十秒一圈的转动，可以自己在animation设置秒数，记住spin的秒数是bg的一半就可以了

 

转载于:https://www.cnblogs.com/yhhBKY/p/10642625.html