百分比环形动效

最新推荐文章于 2024-04-24 23:50:15 发布
最新推荐文章于 2024-04-24 23:50:15 发布
阅读量388 收藏
点赞数
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46060121/article/details/131433199
版权

css

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes loadingMove {
  0% {
    left: 0;
  }

  100% {
    left: 100%;
  }
}

@keyframes circleRun {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes shake {
  0% {
    left: 41px;
  }

  100% {
    left: 49px;
  }
}

@keyframes upDown {
  0% {
    top: 41px;
  }

  100% {
    top: 49px;
  }
}

@keyframes showTip {
  0% {
    top: -50px;
    opacity: 0;
    display: none;
  }

  1% {
    top: -50px;
    opacity: 0;
    display: block;
  }

  10% {
    top: 201px;
    opacity: 100;
  }

  90% {
    top: 201px;
    opacity: 100;
  }

  99% {
    top: -50px;
    opacity: 0;
  }

  100% {
    top: -50px;
    opacity: 0;
    display: none;
  }
}

body {
  color: #fff;
  background: #00090e;
}

.showPrecent div {
  animation-fill-mode: forwards !important;
}

.show1.toCenter .showPrecent div:nth-child(1) {
  animation: fadeInOut 0.15s linear 0s 1 normal;
}

.show2.toCenter .showPrecent div:nth-child(1) {
  animation: fadeInOut 0.15s linear 0s 1 normal;
}

.show2.toCenter .showPrecent div:nth-child(2) {
  animation: fadeInOut 0.15s linear 0.1s 1 normal;
}

.show3.toCenter .showPrecent div:nth-child(1) {
  animation: fadeInOut 0.15s linear 0s 1 normal;
}

.show3.toCenter .showPrecent div:nth-child(2) {
  animation: fadeInOut 0.15s linear 0.1s 1 normal;
}

.show3.toCenter .showPrecent div:nth-child(3) {
  animation: fadeInOut 0.15s linear 0.2s 1 normal;
}

.show4.toCenter .showPrecent div:nth-child(1) {
  animation: fadeInOut 0.15s linear 0s 1 normal;
}

.show4.toCenter .showPrecent div:nth-child(2) {
  animation: fadeInOut 0.15s linear 0.1s 1 normal;
}

.show4.toCenter .showPrecent div:nth-child(3) {
  animation: fadeInOut 0.15s linear 0.2s 1 normal;
}

.show4.toCenter .showPrecent div:nth-child(4) {
  animation: fadeInOut 0.15s linear 0.3s 1 normal;
}

.show5.toCenter .showPrecent div:nth-child(1) {
  animation: fadeInOut 0.15s linear 0s 1 normal;
}

.show5.toCenter .showPrecent div:nth-child(2) {
  animation: fadeInOut 0.15s linear 0.1s 1 normal;
}

.show5.toCenter .showPrecent div:nth-child(3) {
  animation: fadeInOut 0.15s linear 0.2s 1 normal;
}

.show5.toCenter .showPrecent div:nth-child(4) {
  animation: fadeInOut 0.15s linear 0.3s 1 normal;
}

.show5.toCenter .showPrecent div:nth-child(5) {
  animation: fadeInOut 0.15s linear 0.4s 1 normal;
}

.show6.toCenter .showPrecent div:nth-child(1) {
  animation: fadeInOut 0.15s linear 0s 1 normal;
}

.show6.toCenter .showPrecent div:nth-child(2) {
  animation: fadeInOut 0.15s linear 0.1s 1 normal;
}

.show6.toCenter .showPrecent div:nth-child(3) {
  animation: fadeInOut 0.15s linear 0.2s 1 normal;
}

.show6.toCenter .showPrecent div:nth-child(4) {
  animation: fadeInOut 0.15s linear 0.3s 1 normal;
}

.show6.toCenter .showPrecent div:nth-child(5) {
  animation: fadeInOut 0.15s linear 0.4s 1 normal;
}

.show6.toCenter .showPrecent div:nth-child(6) {
  animation: fadeInOut 0.15s linear 0.5s 1 normal;
}

.show7.toCenter .showPrecent div:nth-child(1) {
  animation: fadeInOut 0.15s linear 0s 1 normal;
}

.show7.toCenter .showPrecent div:nth-child(2) {
  animation: fadeInOut 0.15s linear 0.1s 1 normal;
}

.show7.toCenter .showPrecent div:nth-child(3) {
  animation: fadeInOut 0.15s linear 0.2s 1 normal;
}

.show7.toCenter .showPrecent div:nth-child(4) {
  animation: fadeInOut 0.15s linear 0.3s 1 normal;
}

.show7.toCenter .showPrecent div:nth-child(5) {
  animation: fadeInOut 0.15s linear 0.4s 1 normal;
}

.show7.toCenter .showPrecent div:nth-child(6) {
  animation: fadeInOut 0.15s linear 0.5s 1 normal;
}

.show7.toCenter .showPrecent div:nth-child(7) {
  animation: fadeInOut 0.15s linear 0.6s 1 normal;
}

.show8.toCenter .showPrecent div:nth-child(1) {
  animation: fadeInOut 0.15s linear 0s 1 normal;
}

.show8.toCenter .showPrecent div:nth-child(2) {
  animation: fadeInOut 0.15s linear 0.1s 1 normal;
}

.show8.toCenter .showPrecent div:nth-child(3) {
  animation: fadeInOut 0.15s linear 0.2s 1 normal;
}

.show8.toCenter .showPrecent div:nth-child(4) {
  animation: fadeInOut 0.15s linear 0.3s 1 normal;
}

.show8.toCenter .showPrecent div:nth-child(5) {
  animation: fadeInOut 0.15s linear 0.4s 1 normal;
}

.show8.toCenter .showPrecent div:nth-child(6) {
  animation: fadeInOut 0.15s linear 0.5s 1 normal;
}

.show8.toCenter .showPrecent div:nth-child(7) {
  animation: fadeInOut 0.15s linear 0.6s 1 normal;
}

.show8.toCenter .showPrecent div:nth-child(8) {
  animation: fadeInOut 0.15s linear 0.7s 1 normal;
}

.show9.toCenter .showPrecent div:nth-child(1) {
  animation: fadeInOut 0.15s linear 0s 1 normal;
}

.show9.toCenter .showPrecent div:nth-child(2) {
  animation: fadeInOut 0.15s linear 0.1s 1 normal;
}

.show9.toCenter .showPrecent div:nth-child(3) {
  animation: fadeInOut 0.15s linear 0.2s 1 normal;
}

.show9.toCenter .showPrecent div:nth-child(4) {
  animation: fadeInOut 0.15s linear 0.3s 1 normal;
}

.show9.toCenter .showPrecent div:nth-child(5) {
  animation: fadeInOut 0.15s linear 0.4s 1 normal;
}

.show9.toCenter .showPrecent div:nth-child(6) {
  animation: fadeInOut 0.15s linear 0.5s 1 normal;
}

.show9.toCenter .showPrecent div:nth-child(7) {
  animation: fadeInOut 0.15s linear 0.6s 1 normal;
}

.show9.toCenter .showPrecent div:nth-child(8) {
  animation: fadeInOut 0.15s linear 0.7s 1 normal;
}

.show9.toCenter .showPrecent div:nth-child(9) {
  animation: fadeInOut 0.15s linear 0.8s 1 normal;
}

.show10.toCenter .showPrecent div:nth-child(1) {
  animation: fadeInOut 0.15s linear 0s 1 normal;
}

.show10.toCenter .showPrecent div:nth-child(2) {
  animation: fadeInOut 0.15s linear 0.1s 1 normal;
}

.show10.toCenter .showPrecent div:nth-child(3) {
  animation: fadeInOut 0.15s linear 0.2s 1 normal;
}

.show10.toCenter .showPrecent div:nth-child(4) {
  animation: fadeInOut 0.15s linear 0.3s 1 normal;
}

.show10.toCenter .showPrecent div:nth-child(5) {
  animation: fadeInOut 0.15s linear 0.4s 1 normal;
}

.show10.toCenter .showPrecent div:nth-child(6) {
  animation: fadeInOut 0.15s linear 0.5s 1 normal;
}

.show10.toCenter .showPrecent div:nth-child(7) {
  animation: fadeInOut 0.15s linear 0.6s 1 normal;
}

.show10.toCenter .showPrecent div:nth-child(8) {
  animation: fadeInOut 0.15s linear 0.7s 1 normal;
}

.show10.toCenter .showPrecent div:nth-child(9) {
  animation: fadeInOut 0.15s linear 0.8s 1 normal;
}

.show10.toCenter .showPrecent div:nth-child(10) {
  animation: fadeInOut 0.15s linear 0.9s 1 normal;
}

.show11.toCenter .showPrecent div:nth-child(1) {
  animation: fadeInOut 0.15s linear 0s 1 normal;
}

.show11.toCenter .showPrecent div:nth-child(2) {
  animation: fadeInOut 0.15s linear 0.1s 1 normal;
}

.show11.toCenter .showPrecent div:nth-child(3) {
  animation: fadeInOut 0.15s linear 0.2s 1 normal;
}

.show11.toCenter .showPrecent div:nth-child(4) {
  animation: fadeInOut 0.15s linear 0.3s 1 normal;
}

.show11.toCenter .showPrecent div:nth-child(5) {
  animation: fadeInOut 0.15s linear 0.4s 1 normal;
}

.show11.toCenter .showPrecent div:nth-child(6) {
  animation: fadeInOut 0.15s linear 0.5s 1 normal;
}

.show11.toCenter .showPrecent div:nth-child(7) {
  animation: fadeInOut 0.15s linear 0.6s 1 normal;
}

.show11.toCenter .showPrecent div:nth-child(8) {
  animation: fadeInOut 0.15s linear 0.7s 1 normal;
}

.show11.toCenter .showPrecent div:nth-child(9) {
  animation: fadeInOut 0.15s linear 0.8s 1 normal;
}

.show11.toCenter .showPrecent div:nth-child(10) {
  animation: fadeInOut 0.15s linear 0.9s 1 normal;
}

.show11.toCenter .showPrecent div:nth-child(11) {
  animation: fadeInOut 0.15s linear 1s 1 normal;
}

.show12.toCenter .showPrecent div:nth-child(1) {
  animation: fadeInOut 0.15s linear 0s 1 normal;
}

.show12.toCenter .showPrecent div:nth-child(2) {
  animation: fadeInOut 0.15s linear 0.1s 1 normal;
}

.show12.toCenter .showPrecent div:nth-child(3) {
  animation: fadeInOut 0.15s linear 0.2s 1 normal;
}

.show12.toCenter .showPrecent div:nth-child(4) {
  animation: fadeInOut 0.15s linear 0.3s 1 normal;
}

.show12.toCenter .showPrecent div:nth-child(5) {
  animation: fadeInOut 0.15s linear 0.4s 1 normal;
}

.show12.toCenter .showPrecent div:nth-child(6) {
  animation: fadeInOut 0.15s linear 0.5s 1 normal;
}

.show12.toCenter .showPrecent div:nth-child(7) {
  animation: fadeInOut 0.15s linear 0.6s 1 normal;
}

.show12.toCenter .showPrecent div:nth-child(8) {
  animation: fadeInOut 0.15s linear 0.7s 1 normal;
}

.show12.toCenter .showPrecent div:nth-child(9) {
  animation: fadeInOut 0.15s linear 0.8s 1 normal;
}

.show12.toCenter .showPrecent div:nth-child(10) {
  animation: fadeInOut 0.15s linear 0.9s 1 normal;
}

.show12.toCenter .showPrecent div:nth-child(11) {
  animation: fadeInOut 0.15s linear 1s 1 normal;
}

.show12.toCenter .showPrecent div:nth-child(12) {
  animation: fadeInOut 0.15s linear 1.1s 1 normal;
}

.show13.toCenter .showPrecent div:nth-child(1) {
  animation: fadeInOut 0.15s linear 0s 1 normal;
}

.show13.toCenter .showPrecent div:nth-child(2) {
  animation: fadeInOut 0.15s linear 0.1s 1 normal;
}

.show13.toCenter .showPrecent div:nth-child(3) {
  animation: fadeInOut 0.15s linear 0.2s 1 normal;
}

.show13.toCenter .showPrecent div:nth-child(4) {
  animation: fadeInOut 0.15s linear 0.3s 1 normal;
}

.show13.toCenter .showPrecent div:nth-child(5) {
  animation: fadeInOut 0.15s linear 0.4s 1 normal;
}

.show13.toCenter .showPrecent div:nth-child(6) {
  animation: fadeInOut 0.15s linear 0.5s 1 normal;
}

.show13.toCenter .showPrecent div:nth-child(7) {
  animation: fadeInOut 0.15s linear 0.6s 1 normal;
}

.show13.toCenter .showPrecent div:nth-child(8) {
  animation: fadeInOut 0.15s linear 0.7s 1 normal;
}

.show13.toCenter .showPrecent div:nth-child(9) {
  animation: fadeInOut 0.15s linear 0.8s 1 normal;
}

.show13.toCenter .showPrecent div:nth-child(10) {
  animation: fadeInOut 0.15s linear 0.9s 1 normal;
}

.show13.toCenter .showPrecent div:nth-child(11) {
  animation: fadeInOut 0.15s linear 1s 1 normal;
}

.show13.toCenter .showPrecent div:nth-child(12) {
  animation: fadeInOut 0.15s linear 1.1s 1 normal;
}

.show13.toCenter .showPrecent div:nth-child(13) {
  animation: fadeInOut 0.15s linear 1.2s 1 normal;
}

.show14.toCenter .showPrecent div:nth-child(1) {
  animation: fadeInOut 0.15s linear 0s 1 normal;
}

.show14.toCenter .showPrecent div:nth-child(2) {
  animation: fadeInOut 0.15s linear 0.1s 1 normal;
}

.show14.toCenter .showPrecent div:nth-child(3) {
  animation: fadeInOut 0.15s linear 0.2s 1 normal;
}

.show14.toCenter .showPrecent div:nth-child(4) {
  animation: fadeInOut 0.15s linear 0.3s 1 normal;
}

.show14.toCenter .showPrecent div:nth-child(5) {
  animation: fadeInOut 0.15s linear 0.4s 1 normal;
}

.show14.toCenter .showPrecent div:nth-child(6) {
  animation: fadeInOut 0.15s linear 0.5s 1 normal;
}

.show14.toCenter .showPrecent div:nth-child(7) {
  animation: fadeInOut 0.15s linear 0.6s 1 normal;
}

.show14.toCenter .showPrecent div:nth-child(8) {
  animation: fadeInOut 0.15s linear 0.7s 1 normal;
}

.show14.toCenter .showPrecent div:nth-child(9) {
  animation: fadeInOut 0.15s linear 0.8s 1 normal;
}

.show14.toCenter .showPrecent div:nth-child(10) {
  animation: fadeInOut 0.15s linear 0.9s 1 normal;
}

.show14.toCenter .showPrecent div:nth-child(11) {
  animation: fadeInOut 0.15s linear 1s 1 normal;
}

.show14.toCenter .showPrecent div:nth-child(12) {
  animation: fadeInOut 0.15s linear 1.1s 1 normal;
}

.show14.toCenter .showPrecent div:nth-child(13) {
  animation: fadeInOut 0.15s linear 1.2s 1 normal;
}

.show14.toCenter .showPrecent div:nth-child(14) {
  animation: fadeInOut 0.15s linear 1.3s 1 normal;
}

.show15.toCenter .showPrecent div:nth-child(1) {
  animation: fadeInOut 0.15s linear 0s 1 normal;
}

.show15.toCenter .showPrecent div:nth-child(2) {
  animation: fadeInOut 0.15s linear 0.1s 1 normal;
}

.show15.toCenter .showPrecent div:nth-child(3) {
  animation: fadeInOut 0.15s linear 0.2s 1 normal;
}

.show15.toCenter .showPrecent div:nth-child(4) {
  animation: fadeInOut 0.15s linear 0.3s 1 normal;
}

.show15.toCenter .showPrecent div:nth-child(5) {
  animation: fadeInOut 0.15s linear 0.4s 1 normal;
}

.show15.toCenter .showPrecent div:nth-child(6) {
  animation: fadeInOut 0.15s linear 0.5s 1 normal;
}

.show15.toCenter .showPrecent div:nth-child(7) {
  animation: fadeInOut 0.15s linear 0.6s 1 normal;
}

.show15.toCenter .showPrecent div:nth-child(8) {
  animation: fadeInOut 0.15s linear 0.7s 1 normal;
}

.show15.toCenter .showPrecent div:nth-child(9) {
  animation: fadeInOut 0.15s linear 0.8s 1 normal;
}

.show15.toCenter .showPrecent div:nth-child(10) {
  animation: fadeInOut 0.15s linear 0.9s 1 normal;
}

.show15.toCenter .showPrecent div:nth-child(11) {
  animation: fadeInOut 0.15s linear 1s 1 normal;
}

.show15.toCenter .showPrecent div:nth-child(12) {
  animation: fadeInOut 0.15s linear 1.1s 1 normal;
}

.show15.toCenter .showPrecent div:nth-child(13) {
  animation: fadeInOut 0.15s linear 1.2s 1 normal;
}

.show15.toCenter .showPrecent div:nth-child(14) {
  animation: fadeInOut 0.15s linear 1.3s 1 normal;
}

.show15.toCenter .showPrecent div:nth-child(15) {
  animation: fadeInOut 0.15s linear 1.4s 1 normal;
}

.show16.toCenter .showPrecent div:nth-child(1) {
  animation: fadeInOut 0.15s linear 0s 1 normal;
}

.show16.toCenter .showPrecent div:nth-child(2) {
  animation: fadeInOut 0.15s linear 0.1s 1 normal;
}

.show16.toCenter .showPrecent div:nth-child(3) {
  animation: fadeInOut 0.15s linear 0.2s 1 normal;
}

.show16.toCenter .showPrecent div:nth-child(4) {
  animation: fadeInOut 0.15s linear 0.3s 1 normal;
}

.show16.toCenter .showPrecent div:nth-child(5) {
  animation: fadeInOut 0.15s linear 0.4s 1 normal;
}

.show16.toCenter .showPrecent div:nth-child(6) {
  animation: fadeInOut 0.15s linear 0.5s 1 normal;
}

.show16.toCenter .showPrecent div:nth-child(7) {
  animation: fadeInOut 0.15s linear 0.6s 1 normal;
}

.show16.toCenter .showPrecent div:nth-child(8) {
  animation: fadeInOut 0.15s linear 0.7s 1 normal;
}

.show16.toCenter .showPrecent div:nth-child(9) {
  animation: fadeInOut 0.15s linear 0.8s 1 normal;
}

.show16.toCenter .showPrecent div:nth-child(10) {
  animation: fadeInOut 0.15s linear 0.9s 1 normal;
}

.show16.toCenter .showPrecent div:nth-child(11) {
  animation: fadeInOut 0.15s linear 1s 1 normal;
}

.show16.toCenter .showPrecent div:nth-child(12) {
  animation: fadeInOut 0.15s linear 1.1s 1 normal;
}

.show16.toCenter .showPrecent div:nth-child(13) {
  animation: fadeInOut 0.15s linear 1.2s 1 normal;
}

.show16.toCenter .showPrecent div:nth-child(14) {
  animation: fadeInOut 0.15s linear 1.3s 1 normal;
}

.show16.toCenter .showPrecent div:nth-child(15) {
  animation: fadeInOut 0.15s linear 1.4s 1 normal;
}

.show16.toCenter .showPrecent div:nth-child(16) {
  animation: fadeInOut 0.15s linear 1.5s 1 normal;
}

.show17.toCenter .showPrecent div:nth-child(1) {
  animation: fadeInOut 0.15s linear 0s 1 normal;
}

.show17.toCenter .showPrecent div:nth-child(2) {
  animation: fadeInOut 0.15s linear 0.1s 1 normal;
}

.show17.toCenter .showPrecent div:nth-child(3) {
  animation: fadeInOut 0.15s linear 0.2s 1 normal;
}

.show17.toCenter .showPrecent div:nth-child(4) {
  animation: fadeInOut 0.15s linear 0.3s 1 normal;
}

.show17.toCenter .showPrecent div:nth-child(5) {
  animation: fadeInOut 0.15s linear 0.4s 1 normal;
}

.show17.toCenter .showPrecent div:nth-child(6) {
  animation: fadeInOut 0.15s linear 0.5s 1 normal;
}

.show17.toCenter .showPrecent div:nth-child(7) {
  animation: fadeInOut 0.15s linear 0.6s 1 normal;
}

.show17.toCenter .showPrecent div:nth-child(8) {
  animation: fadeInOut 0.15s linear 0.7s 1 normal;
}

.show17.toCenter .showPrecent div:nth-child(9) {
  animation: fadeInOut 0.15s linear 0.8s 1 normal;
}

.show17.toCenter .showPrecent div:nth-child(10) {
  animation: fadeInOut 0.15s linear 0.9s 1 normal;
}

.show17.toCenter .showPrecent div:nth-child(11) {
  animation: fadeInOut 0.15s linear 1s 1 normal;
}

.show17.toCenter .showPrecent div:nth-child(12) {
  animation: fadeInOut 0.15s linear 1.1s 1 normal;
}

.show17.toCenter .showPrecent div:nth-child(13) {
  animation: fadeInOut 0.15s linear 1.2s 1 normal;
}

.show17.toCenter .showPrecent div:nth-child(14) {
  animation: fadeInOut 0.15s linear 1.3s 1 normal;
}

.show17.toCenter .showPrecent div:nth-child(15) {
  animation: fadeInOut 0.15s linear 1.4s 1 normal;
}

.show17.toCenter .showPrecent div:nth-child(16) {
  animation: fadeInOut 0.15s linear 1.5s 1 normal;
}

.show17.toCenter .showPrecent div:nth-child(17) {
  animation: fadeInOut 0.15s linear 1.6s 1 normal;
}

.show18.toCenter .showPrecent div:nth-child(1) {
  animation: fadeInOut 0.15s linear 0s 1 normal;
}

.show18.toCenter .showPrecent div:nth-child(2) {
  animation: fadeInOut 0.15s linear 0.1s 1 normal;
}

.show18.toCenter .showPrecent div:nth-child(3) {
  animation: fadeInOut 0.15s linear 0.2s 1 normal;
}

.show18.toCenter .showPrecent div:nth-child(4) {
  animation: fadeInOut 0.15s linear 0.3s 1 normal;
}

.show18.toCenter .showPrecent div:nth-child(5) {
  animation: fadeInOut 0.15s linear 0.4s 1 normal;
}

.show18.toCenter .showPrecent div:nth-child(6) {
  animation: fadeInOut 0.15s linear 0.5s 1 normal;
}

.show18.toCenter .showPrecent div:nth-child(7) {
  animation: fadeInOut 0.15s linear 0.6s 1 normal;
}

.show18.toCenter .showPrecent div:nth-child(8) {
  animation: fadeInOut 0.15s linear 0.7s 1 normal;
}

.show18.toCenter .showPrecent div:nth-child(9) {
  animation: fadeInOut 0.15s linear 0.8s 1 normal;
}

.show18.toCenter .showPrecent div:nth-child(10) {
  animation: fadeInOut 0.15s linear 0.9s 1 normal;
}

.show18.toCenter .showPrecent div:nth-child(11) {
  animation: fadeInOut 0.15s linear 1s 1 normal;
}

.show18.toCenter .showPrecent div:nth-child(12) {
  animation: fadeInOut 0.15s linear 1.1s 1 normal;
}

.show18.toCenter .showPrecent div:nth-child(13) {
  animation: fadeInOut 0.15s linear 1.2s 1 normal;
}

.show18.toCenter .showPrecent div:nth-child(14) {
  animation: fadeInOut 0.15s linear 1.3s 1 normal;
}

.show18.toCenter .showPrecent div:nth-child(15) {
  animation: fadeInOut 0.15s linear 1.4s 1 normal;
}

.show18.toCenter .showPrecent div:nth-child(16) {
  animation: fadeInOut 0.15s linear 1.5s 1 normal;
}

.show18.toCenter .showPrecent div:nth-child(17) {
  animation: fadeInOut 0.15s linear 1.6s 1 normal;
}

.show18.toCenter .showPrecent div:nth-child(18) {
  animation: fadeInOut 0.15s linear 1.7s 1 normal;
}

.show19.toCenter .showPrecent div:nth-child(1) {
  animation: fadeInOut 0.15s linear 0s 1 normal;
}

.show19.toCenter .showPrecent div:nth-child(2) {
  animation: fadeInOut 0.15s linear 0.1s 1 normal;
}

.show19.toCenter .showPrecent div:nth-child(3) {
  animation: fadeInOut 0.15s linear 0.2s 1 normal;
}

.show19.toCenter .showPrecent div:nth-child(4) {
  animation: fadeInOut 0.15s linear 0.3s 1 normal;
}

.show19.toCenter .showPrecent div:nth-child(5) {
  animation: fadeInOut 0.15s linear 0.4s 1 normal;
}

.show19.toCenter .showPrecent div:nth-child(6) {
  animation: fadeInOut 0.15s linear 0.5s 1 normal;
}

.show19.toCenter .showPrecent div:nth-child(7) {
  animation: fadeInOut 0.15s linear 0.6s 1 normal;
}

.show19.toCenter .showPrecent div:nth-child(8) {
  animation: fadeInOut 0.15s linear 0.7s 1 normal;
}

.show19.toCenter .showPrecent div:nth-child(9) {
  animation: fadeInOut 0.15s linear 0.8s 1 normal;
}

.show19.toCenter .showPrecent div:nth-child(10) {
  animation: fadeInOut 0.15s linear 0.9s 1 normal;
}

.show19.toCenter .showPrecent div:nth-child(11) {
  animation: fadeInOut 0.15s linear 1s 1 normal;
}

.show19.toCenter .showPrecent div:nth-child(12) {
  animation: fadeInOut 0.15s linear 1.1s 1 normal;
}

.show19.toCenter .showPrecent div:nth-child(13) {
  animation: fadeInOut 0.15s linear 1.2s 1 normal;
}

.show19.toCenter .showPrecent div:nth-child(14) {
  animation: fadeInOut 0.15s linear 1.3s 1 normal;
}

.show19.toCenter .showPrecent div:nth-child(15) {
  animation: fadeInOut 0.15s linear 1.4s 1 normal;
}

.show19.toCenter .showPrecent div:nth-child(16) {
  animation: fadeInOut 0.15s linear 1.5s 1 normal;
}

.show19.toCenter .showPrecent div:nth-child(17) {
  animation: fadeInOut 0.15s linear 1.6s 1 normal;
}

.show19.toCenter .showPrecent div:nth-child(18) {
  animation: fadeInOut 0.15s linear 1.7s 1 normal;
}

.show19.toCenter .showPrecent div:nth-child(19) {
  animation: fadeInOut 0.15s linear 1.8s 1 normal;
}

.show20.toCenter .showPrecent div:nth-child(1) {
  animation: fadeInOut 0.15s linear 0s 1 normal;
}

.show20.toCenter .showPrecent div:nth-child(2) {
  animation: fadeInOut 0.15s linear 0.1s 1 normal;
}

.show20.toCenter .showPrecent div:nth-child(3) {
  animation: fadeInOut 0.15s linear 0.2s 1 normal;
}

.show20.toCenter .showPrecent div:nth-child(4) {
  animation: fadeInOut 0.15s linear 0.3s 1 normal;
}

.show20.toCenter .showPrecent div:nth-child(5) {
  animation: fadeInOut 0.15s linear 0.4s 1 normal;
}

.show20.toCenter .showPrecent div:nth-child(6) {
  animation: fadeInOut 0.15s linear 0.5s 1 normal;
}

.show20.toCenter .showPrecent div:nth-child(7) {
  animation: fadeInOut 0.15s linear 0.6s 1 normal;
}

.show20.toCenter .showPrecent div:nth-child(8) {
  animation: fadeInOut 0.15s linear 0.7s 1 normal;
}

.show20.toCenter .showPrecent div:nth-child(9) {
  animation: fadeInOut 0.15s linear 0.8s 1 normal;
}

.show20.toCenter .showPrecent div:nth-child(10) {
  animation: fadeInOut 0.15s linear 0.9s 1 normal;
}

.show20.toCenter .showPrecent div:nth-child(11) {
  animation: fadeInOut 0.15s linear 1s 1 normal;
}

.show20.toCenter .showPrecent div:nth-child(12) {
  animation: fadeInOut 0.15s linear 1.1s 1 normal;
}

.show20.toCenter .showPrecent div:nth-child(13) {
  animation: fadeInOut 0.15s linear 1.2s 1 normal;
}

.show20.toCenter .showPrecent div:nth-child(14) {
  animation: fadeInOut 0.15s linear 1.3s 1 normal;
}

.show20.toCenter .showPrecent div:nth-child(15) {
  animation: fadeInOut 0.15s linear 1.4s 1 normal;
}

.show20.toCenter .showPrecent div:nth-child(16) {
  animation: fadeInOut 0.15s linear 1.5s 1 normal;
}

.show20.toCenter .showPrecent div:nth-child(17) {
  animation: fadeInOut 0.15s linear 1.6s 1 normal;
}

.show20.toCenter .showPrecent div:nth-child(18) {
  animation: fadeInOut 0.15s linear 1.7s 1 normal;
}

.show20.toCenter .showPrecent div:nth-child(19) {
  animation: fadeInOut 0.15s linear 1.8s 1 normal;
}

.show20.toCenter .showPrecent div:nth-child(20) {
  animation: fadeInOut 0.15s linear 1.9s 1 normal;
}

.show21.toCenter .showPrecent div:nth-child(1) {
  animation: fadeInOut 0.15s linear 0s 1 normal;
}

.show21.toCenter .showPrecent div:nth-child(2) {
  animation: fadeInOut 0.15s linear 0.1s 1 normal;
}

.show21.toCenter .showPrecent div:nth-child(3) {
  animation: fadeInOut 0.15s linear 0.2s 1 normal;
}

.show21.toCenter .showPrecent div:nth-child(4) {
  animation: fadeInOut 0.15s linear 0.3s 1 normal;
}

.show21.toCenter .showPrecent div:nth-child(5) {
  animation: fadeInOut 0.15s linear 0.4s 1 normal;
}

.show21.toCenter .showPrecent div:nth-child(6) {
  animation: fadeInOut 0.15s linear 0.5s 1 normal;
}

.show21.toCenter .showPrecent div:nth-child(7) {
  animation: fadeInOut 0.15s linear 0.6s 1 normal;
}

.show21.toCenter .showPrecent div:nth-child(8) {
  animation: fadeInOut 0.15s linear 0.7s 1 normal;
}

.show21.toCenter .showPrecent div:nth-child(9) {
  animation: fadeInOut 0.15s linear 0.8s 1 normal;
}

.show21.toCenter .showPrecent div:nth-child(10) {
  animation: fadeInOut 0.15s linear 0.9s 1 normal;
}

.show21.toCenter .showPrecent div:nth-child(11) {
  animation: fadeInOut 0.15s linear 1s 1 normal;
}

.show21.toCenter .showPrecent div:nth-child(12) {
  animation: fadeInOut 0.15s linear 1.1s 1 normal;
}

.show21.toCenter .showPrecent div:nth-child(13) {
  animation: fadeInOut 0.15s linear 1.2s 1 normal;
}

.show21.toCenter .showPrecent div:nth-child(14) {
  animation: fadeInOut 0.15s linear 1.3s 1 normal;
}

.show21.toCenter .showPrecent div:nth-child(15) {
  animation: fadeInOut 0.15s linear 1.4s 1 normal;
}

.show21.toCenter .showPrecent div:nth-child(16) {
  animation: fadeInOut 0.15s linear 1.5s 1 normal;
}

.show21.toCenter .showPrecent div:nth-child(17) {
  animation: fadeInOut 0.15s linear 1.6s 1 normal;
}

.show21.toCenter .showPrecent div:nth-child(18) {
  animation: fadeInOut 0.15s linear 1.7s 1 normal;
}

.show21.toCenter .showPrecent div:nth-child(19) {
  animation: fadeInOut 0.15s linear 1.8s 1 normal;
}

.show21.toCenter .showPrecent div:nth-child(20) {
  animation: fadeInOut 0.15s linear 1.9s 1 normal;
}

.show21.toCenter .showPrecent div:nth-child(21) {
  animation: fadeInOut 0.15s linear 2s 1 normal;
}

.show22.toCenter .showPrecent div:nth-child(1) {
  animation: fadeInOut 0.15s linear 0s 1 normal;
}

.show22.toCenter .showPrecent div:nth-child(2) {
  animation: fadeInOut 0.15s linear 0.1s 1 normal;
}

.show22.toCenter .showPrecent div:nth-child(3) {
  animation: fadeInOut 0.15s linear 0.2s 1 normal;
}

.show22.toCenter .showPrecent div:nth-child(4) {
  animation: fadeInOut 0.15s linear 0.3s 1 normal;
}

.show22.toCenter .showPrecent div:nth-child(5) {
  animation: fadeInOut 0.15s linear 0.4s 1 normal;
}

.show22.toCenter .showPrecent div:nth-child(6) {
  animation: fadeInOut 0.15s linear 0.5s 1 normal;
}

.show22.toCenter .showPrecent div:nth-child(7) {
  animation: fadeInOut 0.15s linear 0.6s 1 normal;
}

.show22.toCenter .showPrecent div:nth-child(8) {
  animation: fadeInOut 0.15s linear 0.7s 1 normal;
}

.show22.toCenter .showPrecent div:nth-child(9) {
  animation: fadeInOut 0.15s linear 0.8s 1 normal;
}

.show22.toCenter .showPrecent div:nth-child(10) {
  animation: fadeInOut 0.15s linear 0.9s 1 normal;
}

.show22.toCenter .showPrecent div:nth-child(11) {
  animation: fadeInOut 0.15s linear 1s 1 normal;
}

.show22.toCenter .showPrecent div:nth-child(12) {
  animation: fadeInOut 0.15s linear 1.1s 1 normal;
}

.show22.toCenter .showPrecent div:nth-child(13) {
  animation: fadeInOut 0.15s linear 1.2s 1 normal;
}

.show22.toCenter .showPrecent div:nth-child(14) {
  animation: fadeInOut 0.15s linear 1.3s 1 normal;
}

.show22.toCenter .showPrecent div:nth-child(15) {
  animation: fadeInOut 0.15s linear 1.4s 1 normal;
}

.show22.toCenter .showPrecent div:nth-child(16) {
  animation: fadeInOut 0.15s linear 1.5s 1 normal;
}

.show22.toCenter .showPrecent div:nth-child(17) {
  animation: fadeInOut 0.15s linear 1.6s 1 normal;
}

.show22.toCenter .showPrecent div:nth-child(18) {
  animation: fadeInOut 0.15s linear 1.7s 1 normal;
}

.show22.toCenter .showPrecent div:nth-child(19) {
  animation: fadeInOut 0.15s linear 1.8s 1 normal;
}

.show22.toCenter .showPrecent div:nth-child(20) {
  animation: fadeInOut 0.15s linear 1.9s 1 normal;
}

.show22.toCenter .showPrecent div:nth-child(21) {
  animation: fadeInOut 0.15s linear 2s 1 normal;
}

.show22.toCenter .showPrecent div:nth-child(22) {
  animation: fadeInOut 0.15s linear 2.1s 1 normal;
}

.show23.toCenter .showPrecent div:nth-child(1) {
  animation: fadeInOut 0.15s linear 0s 1 normal;
}

.show23.toCenter .showPrecent div:nth-child(2) {
  animation: fadeInOut 0.15s linear 0.1s 1 normal;
}

.show23.toCenter .showPrecent div:nth-child(3) {
  animation: fadeInOut 0.15s linear 0.2s 1 normal;
}

.show23.toCenter .showPrecent div:nth-child(4) {
  animation: fadeInOut 0.15s linear 0.3s 1 normal;
}

.show23.toCenter .showPrecent div:nth-child(5) {
  animation: fadeInOut 0.15s linear 0.4s 1 normal;
}

.show23.toCenter .showPrecent div:nth-child(6) {
  animation: fadeInOut 0.15s linear 0.5s 1 normal;
}

.show23.toCenter .showPrecent div:nth-child(7) {
  animation: fadeInOut 0.15s linear 0.6s 1 normal;
}

.show23.toCenter .showPrecent div:nth-child(8) {
  animation: fadeInOut 0.15s linear 0.7s 1 normal;
}

.show23.toCenter .showPrecent div:nth-child(9) {
  animation: fadeInOut 0.15s linear 0.8s 1 normal;
}

.show23.toCenter .showPrecent div:nth-child(10) {
  animation: fadeInOut 0.15s linear 0.9s 1 normal;
}

.show23.toCenter .showPrecent div:nth-child(11) {
  animation: fadeInOut 0.15s linear 1s 1 normal;
}

.show23.toCenter .showPrecent div:nth-child(12) {
  animation: fadeInOut 0.15s linear 1.1s 1 normal;
}

.show23.toCenter .showPrecent div:nth-child(13) {
  animation: fadeInOut 0.15s linear 1.2s 1 normal;
}

.show23.toCenter .showPrecent div:nth-child(14) {
  animation: fadeInOut 0.15s linear 1.3s 1 normal;
}

.show23.toCenter .showPrecent div:nth-child(15) {
  animation: fadeInOut 0.15s linear 1.4s 1 normal;
}

.show23.toCenter .showPrecent div:nth-child(16) {
  animation: fadeInOut 0.15s linear 1.5s 1 normal;
}

.show23.toCenter .showPrecent div:nth-child(17) {
  animation: fadeInOut 0.15s linear 1.6s 1 normal;
}

.show23.toCenter .showPrecent div:nth-child(18) {
  animation: fadeInOut 0.15s linear 1.7s 1 normal;
}

.show23.toCenter .showPrecent div:nth-child(19) {
  animation: fadeInOut 0.15s linear 1.8s 1 normal;
}

.show23.toCenter .showPrecent div:nth-child(20) {
  animation: fadeInOut 0.15s linear 1.9s 1 normal;
}

.show23.toCenter .showPrecent div:nth-child(21) {
  animation: fadeInOut 0.15s linear 2s 1 normal;
}

.show23.toCenter .showPrecent div:nth-child(22) {
  animation: fadeInOut 0.15s linear 2.1s 1 normal;
}

.show23.toCenter .showPrecent div:nth-child(23) {
  animation: fadeInOut 0.15s linear 2.2s 1 normal;
}

.show24.toCenter .showPrecent div:nth-child(1) {
  animation: fadeInOut 0.15s linear 0s 1 normal;
}

.show24.toCenter .showPrecent div:nth-child(2) {
  animation: fadeInOut 0.15s linear 0.1s 1 normal;
}

.show24.toCenter .showPrecent div:nth-child(3) {
  animation: fadeInOut 0.15s linear 0.2s 1 normal;
}

.show24.toCenter .showPrecent div:nth-child(4) {
  animation: fadeInOut 0.15s linear 0.3s 1 normal;
}

.show24.toCenter .showPrecent div:nth-child(5) {
  animation: fadeInOut 0.15s linear 0.4s 1 normal;
}

.show24.toCenter .showPrecent div:nth-child(6) {
  animation: fadeInOut 0.15s linear 0.5s 1 normal;
}

.show24.toCenter .showPrecent div:nth-child(7) {
  animation: fadeInOut 0.15s linear 0.6s 1 normal;
}

.show24.toCenter .showPrecent div:nth-child(8) {
  animation: fadeInOut 0.15s linear 0.7s 1 normal;
}

.show24.toCenter .showPrecent div:nth-child(9) {
  animation: fadeInOut 0.15s linear 0.8s 1 normal;
}

.show24.toCenter .showPrecent div:nth-child(10) {
  animation: fadeInOut 0.15s linear 0.9s 1 normal;
}

.show24.toCenter .showPrecent div:nth-child(11) {
  animation: fadeInOut 0.15s linear 1s 1 normal;
}

.show24.toCenter .showPrecent div:nth-child(12) {
  animation: fadeInOut 0.15s linear 1.1s 1 normal;
}

.show24.toCenter .showPrecent div:nth-child(13) {
  animation: fadeInOut 0.15s linear 1.2s 1 normal;
}

.show24.toCenter .showPrecent div:nth-child(14) {
  animation: fadeInOut 0.15s linear 1.3s 1 normal;
}

.show24.toCenter .showPrecent div:nth-child(15) {
  animation: fadeInOut 0.15s linear 1.4s 1 normal;
}

.show24.toCenter .showPrecent div:nth-child(16) {
  animation: fadeInOut 0.15s linear 1.5s 1 normal;
}

.show24.toCenter .showPrecent div:nth-child(17) {
  animation: fadeInOut 0.15s linear 1.6s 1 normal;
}

.show24.toCenter .showPrecent div:nth-child(18) {
  animation: fadeInOut 0.15s linear 1.7s 1 normal;
}

.show24.toCenter .showPrecent div:nth-child(19) {
  animation: fadeInOut 0.15s linear 1.8s 1 normal;
}

.show24.toCenter .showPrecent div:nth-child(20) {
  animation: fadeInOut 0.15s linear 1.9s 1 normal;
}

.show24.toCenter .showPrecent div:nth-child(21) {
  animation: fadeInOut 0.15s linear 2s 1 normal;
}

.show24.toCenter .showPrecent div:nth-child(22) {
  animation: fadeInOut 0.15s linear 2.1s 1 normal;
}

.show24.toCenter .showPrecent div:nth-child(23) {
  animation: fadeInOut 0.15s linear 2.2s 1 normal;
}

.show24.toCenter .showPrecent div:nth-child(24) {
  animation: fadeInOut 0.15s linear 2.3s 1 normal;
}

.show25.toCenter .showPrecent div:nth-child(1) {
  animation: fadeInOut 0.15s linear 0s 1 normal;
}

.show25.toCenter .showPrecent div:nth-child(2) {
  animation: fadeInOut 0.15s linear 0.1s 1 normal;
}

.show25.toCenter .showPrecent div:nth-child(3) {
  animation: fadeInOut 0.15s linear 0.2s 1 normal;
}

.show25.toCenter .showPrecent div:nth-child(4) {
  animation: fadeInOut 0.15s linear 0.3s 1 normal;
}

.show25.toCenter .showPrecent div:nth-child(5) {
  animation: fadeInOut 0.15s linear 0.4s 1 normal;
}

.show25.toCenter .showPrecent div:nth-child(6) {
  animation: fadeInOut 0.15s linear 0.5s 1 normal;
}

.show25.toCenter .showPrecent div:nth-child(7) {
  animation: fadeInOut 0.15s linear 0.6s 1 normal;
}

.show25.toCenter .showPrecent div:nth-child(8) {
  animation: fadeInOut 0.15s linear 0.7s 1 normal;
}

.show25.toCenter .showPrecent div:nth-child(9) {
  animation: fadeInOut 0.15s linear 0.8s 1 normal;
}

.show25.toCenter .showPrecent div:nth-child(10) {
  animation: fadeInOut 0.15s linear 0.9s 1 normal;
}

.show25.toCenter .showPrecent div:nth-child(11) {
  animation: fadeInOut 0.15s linear 1s 1 normal;
}

.show25.toCenter .showPrecent div:nth-child(12) {
  animation: fadeInOut 0.15s linear 1.1s 1 normal;
}

.show25.toCenter .showPrecent div:nth-child(13) {
  animation: fadeInOut 0.15s linear 1.2s 1 normal;
}

.show25.toCenter .showPrecent div:nth-child(14) {
  animation: fadeInOut 0.15s linear 1.3s 1 normal;
}

.show25.toCenter .showPrecent div:nth-child(15) {
  animation: fadeInOut 0.15s linear 1.4s 1 normal;
}

.show25.toCenter .showPrecent div:nth-child(16) {
  animation: fadeInOut 0.15s linear 1.5s 1 normal;
}

.show25.toCenter .showPrecent div:nth-child(17) {
  animation: fadeInOut 0.15s linear 1.6s 1 normal;
}

.show25.toCenter .showPrecent div:nth-child(18) {
  animation: fadeInOut 0.15s linear 1.7s 1 normal;
}

.show25.toCenter .showPrecent div:nth-child(19) {
  animation: fadeInOut 0.15s linear 1.8s 1 normal;
}

.show25.toCenter .showPrecent div:nth-child(20) {
  animation: fadeInOut 0.15s linear 1.9s 1 normal;
}

.show25.toCenter .showPrecent div:nth-child(21) {
  animation: fadeInOut 0.15s linear 2s 1 normal;
}

.show25.toCenter .showPrecent div:nth-child(22) {
  animation: fadeInOut 0.15s linear 2.1s 1 normal;
}

.show25.toCenter .showPrecent div:nth-child(23) {
  animation: fadeInOut 0.15s linear 2.2s 1 normal;
}

.show25.toCenter .showPrecent div:nth-child(24) {
  animation: fadeInOut 0.15s linear 2.3s 1 normal;
}

.show25.toCenter .showPrecent div:nth-child(25) {
  animation: fadeInOut 0.15s linear 2.4s 1 normal;
}

.toCenter {
  width: 180px;
  height: 100px;
  overflow: hidden;
  background: url(./images/demo1.png) no-repeat;
  position: relative;
  text-align: center;
}

.toCenter h2 {
  font-size: 40px;
  line-height: 10px;
  font-weight: bolder;
  position: relative;
  z-index: 3;
  text-shadow: 0px 0px 6px #00f, 0px 0px 10px #00f;
}

.toCenter h2 span {
  font-size: 12px;
  font-weight: normal;
}

/* .toCenter p {
  position: relative;
  z-index: 3;
} */

.toCenter .light {
  width: 99px;
  height: 41px;
  overflow: hidden;
  background: url(./images/demo1.png) no-repeat -29px -188px;
  position: absolute;
  top: 32px;
  left: 40px;
}

.toCenter .showPrecent {
  width: 100%;
  height: 100px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.toCenter .showPrecent div {
  width: 29px;
  height: 22px;
  overflow: hidden;
  position: absolute;
  background: url(./images/demo1.png) no-repeat 0px -100px;
  opacity: 0;
}

.toCenter .showPrecent div:nth-child(1) {
  top: 32px;
  left: 0px;
}

.toCenter .showPrecent div:nth-child(2) {
  background-position: 0px -122px;
  top: 43px;
  left: 1px;
}

.toCenter .showPrecent div:nth-child(3) {
  background-position: 0px -144px;
  top: 53px;
  left: 5px;
}

.toCenter .showPrecent div:nth-child(4) {
  background-position: 0px -166px;
  top: 62px;
  left: 15px;
}

.toCenter .showPrecent div:nth-child(5) {
  background: url(./images/demo1.png) no-repeat -29px -100px;
  top: 70px;
  left: 30px;
}

.toCenter .showPrecent div:nth-child(6) {
  background: url(./images/demo1.png) no-repeat -29px -122px;
  top: 76px;
  left: 51px;
}

.toCenter .showPrecent div:nth-child(7) {
  background: url(./images/demo1.png) no-repeat -29px -144px;
  top: 77px;
  left: 75px;
}

.toCenter .showPrecent div:nth-child(8) {
  background: url(./images/demo1.png) no-repeat -29px -166px;
  top: 76px;
  left: 99px;
}

.toCenter .showPrecent div:nth-child(9) {
  background: url(./images/demo1.png) no-repeat -58px -100px;
  top: 70px;
  left: 120px;
}

.toCenter .showPrecent div:nth-child(10) {
  background: url(./images/demo1.png) no-repeat -58px -122px;
  top: 62px;
  left: 136px;
}

.toCenter .showPrecent div:nth-child(11) {
  background: url(./images/demo1.png) no-repeat -58px -144px;
  top: 53px;
  left: 146px;
}

.toCenter .showPrecent div:nth-child(12) {
  background: url(./images/demo1.png) no-repeat -58px -166px;
  top: 43px;
  left: 150px;
}

.toCenter .showPrecent div:nth-child(13) {
  background: url(./images/demo1.png) no-repeat -87px -100px;
  top: 33px;
  left: 149px;
}

.toCenter .showPrecent div:nth-child(14) {
  background: url(./images/demo1.png) no-repeat -87px -122px;
  top: 21px;
  left: 146px;
}

.toCenter .showPrecent div:nth-child(15) {
  background: url(./images/demo1.png) no-repeat -87px -144px;
  top: 13px;
  left: 138px;
}

.toCenter .showPrecent div:nth-child(16) {
  background: url(./images/demo1.png) no-repeat -87px -166px;
  top: 6px;
  left: 127px;
}

.toCenter .showPrecent div:nth-child(17) {
  background: url(./images/demo1.png) no-repeat -116px -100px;
  top: 1px;
  left: 114px;
}

.toCenter .showPrecent div:nth-child(18) {
  background: url(./images/demo1.png) no-repeat -116px -122px;
  top: -3px;
  left: 99px;
}

.toCenter .showPrecent div:nth-child(19) {
  background: url(./images/demo1.png) no-repeat -116px -144px;
  top: -4px;
  left: 85px;
}

.toCenter .showPrecent div:nth-child(20) {
  background: url(./images/demo1.png) no-repeat -116px -166px;
  top: -4px;
  left: 68px;
}

.toCenter .showPrecent div:nth-child(21) {
  background: url(./images/demo1.png) no-repeat -145px -100px;
  top: -3px;
  left: 54px;
}

.toCenter .showPrecent div:nth-child(22) {
  background: url(./images/demo1.png) no-repeat -145px -122px;
  top: 1px;
  left: 39px;
}

.toCenter .showPrecent div:nth-child(23) {
  background: url(./images/demo1.png) no-repeat -145px -144px;
  top: 6px;
  left: 25px;
}

.toCenter .showPrecent div:nth-child(24) {
  background: url(./images/demo1.png) no-repeat -145px -166px;
  top: 13px;
  left: 13px;
}

.toCenter .showPrecent div:nth-child(25) {
  background: url(./images/demo1.png) no-repeat 0px -188px;
  top: 21px;
  left: 4px;
}

html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./index.css">
  <title>Document</title>
</head>

<body>
  <div id="pie" class="toCenter">
    <h2 id="percentage">0<span>%</span></h2>
    <div class="light"></div>
    <div class="showPrecent">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>

  <script>
    var currentNum = 0; // 当前
    var totalNum = 100; // 总数

    update();

    // 刷新
    function update() {
      currentNum = Math.round(Math.random() * 100) // 0-100的随机数
      var percent = Math.round(currentNum / totalNum * 100); // 计算百分比
      console.log('percent: ', percent);
      styleChange(percent)
      document.querySelector('#percentage').innerHTML = `${percent}<span>%</span>`;
    }

    // 刷新进度样式
    function styleChange(percent) {
      var cssName = 'show' + Math.ceil(percent / 4);
      console.log('cssName: ', cssName);
      document.querySelector('#pie').setAttribute('class', 'toCenter ' + cssName); // 改变类
    }
  </script>
</body>

</html>

图片和效果
在这里插入图片描述
在这里插入图片描述

正一品程序员
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
环形进度条
12-04
使用css3来实现环形进度条，只传入百分比中的数字即可展示环形状态，可以根据具体需求进行代码修改
实现CSS圆环的5种方法(小结)
09-22
主要介绍了实现CSS圆环的5种方法(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
用CSS+SVG做一个优雅的环形进度条
OpenTiny的博客
10-19 1001
本文为我们介绍了用CSS+SVG做一个优雅的环形进度条的核心原理。利用两个重叠的圆环形，通过对上层圆环弧长的控制来表示进度，下层圆环则作为辅助，呈现环形进度条剩余的部分。
圆环图占比代码html,纯CSS实现饼图、环形图（百分比）
weixin_32512451的博客
06-09 1233
本篇文章详细介绍了如何使用纯CSS实现饼状图以及环形图，并且附带有源代码一、饼状图CSS.pie {width: 100px;height: 100px;border-radius: 50%;background: yellowgreen;background-image: linear-gradient(to right, transparent 50%, #655 0);}.pie::befo...
CSS深度挖掘 - 「Border-radius」的八个值
张芳帅的博客
01-26 8423
知识往往随时间淡忘，沉心在开发中时间长了，发现好些知识已经又模糊了，一些很好用的属性，其本身就有，却忘了，然后绕个大圈子自己实现了一套，究其原因，还是因为一开始没有掌握牢固和透彻 # 都知道是圆角   border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。他用于向 block 级别元素增加圆角 语法 border-radius:
纯css实现百分比环形图
小又夫的博客
10-14 8520
一、原型图 二、思路 第1层，绘制饼图（shape）和灰色细环部分（bottom），其中shape是根元素，所有元素都将相对shape做绝对定位。根据原型图的显示效果，对bottom的定位做一定的调整如图所示： 第2层，绘制左环（ring-left）和右环（ring-right）如图所示： 第3层，绘制遮罩环（.ring-hide），调整与第1层的环吻合，用于遮住右环和转动到右边区域的左环部分，制作出扇形图的效果，如图所示： 第4层，显示百分比值的圆（.cover)，层级最高，放在中间做遮罩，制作出环
css实现圆形进度条
老实敲代码，佛只渡有缘人
10-26 837
3）大于50%，right为180deg，left对应：100%是0deg，75%对应-90deg，以此为例，那么计算规律是，75% - 50% = 25%，25 * 3.6 = 90，因为left是逆时针计算，所以需要用180 - 90 = 90，再添加一个符号即可（数学上直接减180结果一样），就是-90deg。1）当百分比小于50%且不为0的时候，左边不需要百分比：为-180度，右边180度是50%，计算出1%是多少度：180 / 50% = 3.6度（度/1%），乘以百分比即可；
前端css实现统计圆环
wang13679201813的博客
09-15 724
css样式
CSS实现圆环百分比进度效果
热门推荐
极简
04-19 1万+
原理：红色背景圆为主题，在其上覆盖左右两个灰色半圆，然后在最上面放上用于显示百分比的黑色圆，通过交替旋转两个灰色半圆露出下面的红色背景，在视觉上实现百分比进度效果。 一、效果图 二、代码：https://codepen.io/wlei/pen/RyNPKE...
css圆环百分比
weixin_34087307的博客
11-23 203
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="js/jquery-3.1.1.js"&
百分比环形动效html
06-28
百分比环形动效html
环形百分比.zip
09-06
环形百分比、报表
环形进度百分比js插件
04-11
一款环形进度图表JavaScript库，(进度条)可视化数据您指定的百分比。
自定义环形进度条 显示百分比
11-26
自定义环形进度条 显示百分比
3D立体环形百分比进度图表特效代码
03-20
3D立体环形百分比进度图表代码是一款只要传入0100的整数，就能显示对应的百分比，大小自适应。
postcss简介
地球空间
04-21 463
2. **使用未来 CSS 特性**：PostCSS 允许开发者使用尚未被所有浏览器广泛支持的 CSS 特性，如 `var()` 变量、`@apply` 指令等，然后通过插件将它们转换为当前浏览器兼容的形式。5. **社区支持**：PostCSS 有一个活跃的社区，提供了大量的插件和工具，可以满足各种特定的需求。4. **代码格式化**：PostCSS 可以按照特定的风格指南格式化 CSS 代码，提高代码的可读性。2. **提高代码质量**：代码优化和格式化功能可以提高 CSS 代码的性能和可读性。
CSS引入的三种方式
weixin_59272777的博客
04-24 776
样式引入方式特点优点缺点适用场景内联样式（Inline Styles）在HTML元素内部使用style属性定义样式直观、快速，无需额外编写CSS代码不利于样式统一管理和复用，增加HTML文档复杂性对单个元素进行临时或快速样式调整，无需多页面复用内部样式表（Internal Stylesheets）在HTML文档的部分使用标签定义样式样式集中管理，HTML文档结构更清晰需在每个页面部分重复编写样式，不利于样式复用和共享。
CSS基础——2.CSS选择器
weixin_66370632的博客
04-24 1323
1. 通用选择器 通用选择器用星号*表示，它不匹配某个特定的 HTML 元素，而是匹配 HTML 文档中的每个元素,开发中通常使用通用选择器来清除 HTML元素中默认的内外边距
css中新型的边框设置属性border-inline
最新发布
qwguo
04-24 498
是 CSS 逻辑属性的重要组成部分，用于在书写模式无关的情况下设置元素的内联方向边框。掌握并运用这些逻辑属性有助于创建出更灵活、适应性更强的网页布局和样式，特别是在响应式设计和多语言支持场景中。
uniapp手写环形百分比
10-20
关于手写环形百分比，可以通过以下步骤实现： 1. 在Vue组件中定义一个canvas元素，设置宽高和id属性。 2. 在mounted钩子函数中获取canvas元素，并获取其上下文对象。 3. 通过上下文对象绘制环形进度条，可以使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值