Fan.wxss 941 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  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. text-align: center;
  27. }
  28. .sx1 {
  29. position: absolute;
  30. width:100%;
  31. height: 100%;
  32. clip: rect(0, 100rpx, 200rpx, 0); /*这个clip属性用来绘制半圆,在clip的rect范围内的内容显示出来,使用clip属性,元素必须是absolute的 */
  33. border-radius: 50%;
  34. background-color: #4cdf95;
  35. transform: rotate(180deg);
  36. }
  37. .sx2 {
  38. position: absolute;
  39. width:100%;
  40. height: 100%;
  41. clip: rect(0, 100rpx, 200rpx, 0);
  42. border-radius: 50%;
  43. background-color: #f0f0f0;
  44. transform: rotate(-150deg);
  45. }