CircleScore.less 771 B

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. .circleScore {
  2. width: 174px;
  3. height: 174px;
  4. position: relative;
  5. }
  6. .big {
  7. width: 194px;
  8. height: 194px;
  9. .circle {
  10. mask: radial-gradient(transparent, transparent 78px, #000 78px);
  11. }
  12. }
  13. .circle {
  14. width: 100%;
  15. height: 100%;
  16. border-radius: 50%;
  17. animation: rotation 4s linear infinite;
  18. background: linear-gradient(60deg, #36a5ed 0%, #6eee96 100%);
  19. mask: radial-gradient(transparent, transparent 75px, #000 77px);
  20. }
  21. .text {
  22. position: absolute;
  23. top: 50%;
  24. left: 50%;
  25. transform: translate(-50%, -50%);
  26. font-size: 44px;
  27. font-weight: bold;
  28. // color: #fff;
  29. text-align: center;
  30. }
  31. @keyframes rotation {
  32. from {
  33. transform: rotate(0deg); /* 起始旋转角度 */
  34. }
  35. to {
  36. transform: rotate(360deg); /* 结束旋转角度 */
  37. }
  38. }