Fan.wxss 919 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. .fan {
  2. position: relative;
  3. }
  4. .shanxing {
  5. width:100rpx;
  6. height:100rpx;
  7. border-radius: 50%;
  8. position: absolute;
  9. left: 0;
  10. top: 0;
  11. background-color: #F0F0F0;
  12. }
  13. .shanxing2 {
  14. background-color: #FF8C83;
  15. }
  16. .shanxingSmall {
  17. width: 72rpx;
  18. height: 72rpx;
  19. line-height: 72rpx;
  20. border-radius: 50%;
  21. background-color: #fff;
  22. position: absolute;
  23. left: 14rpx;
  24. top: 14rpx;
  25. font-family: 'Roboto-Black';
  26. }
  27. .sx1 {
  28. position: absolute;
  29. width:100%;
  30. height: 100%;
  31. clip: rect(0, 100rpx, 200rpx, 0); /*这个clip属性用来绘制半圆,在clip的rect范围内的内容显示出来,使用clip属性,元素必须是absolute的 */
  32. border-radius: 50%;
  33. background-color: #4cdf95;
  34. transform: rotate(180deg);
  35. }
  36. .sx2 {
  37. position: absolute;
  38. width:100%;
  39. height: 100%;
  40. clip: rect(0, 100rpx, 200rpx, 0);
  41. border-radius: 50%;
  42. background-color: #f0f0f0;
  43. transform: rotate(-150deg);
  44. }