| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 |
- .fan {
- position: relative;
- }
- .shanxing {
- width:100rpx;
- height:100rpx;
- border-radius: 50%;
- position: absolute;
- left: 0;
- top: 0;
- background-color: #F0F0F0;
- }
- .shanxing2 {
- background-color: #FF8C83;
- }
- .shanxingSmall {
- width: 72rpx;
- height: 72rpx;
- line-height: 72rpx;
- border-radius: 50%;
- background-color: #fff;
- position: absolute;
- left: 14rpx;
- top: 14rpx;
- font-family: 'Roboto-Black';
- text-align: center;
- }
- .sx1 {
- position: absolute;
- width:100%;
- height: 100%;
- clip: rect(0, 100rpx, 200rpx, 0); /*这个clip属性用来绘制半圆,在clip的rect范围内的内容显示出来,使用clip属性,元素必须是absolute的 */
- border-radius: 50%;
- background-color: #4cdf95;
- transform: rotate(180deg);
- }
- .sx2 {
- position: absolute;
- width:100%;
- height: 100%;
- clip: rect(0, 100rpx, 200rpx, 0);
- border-radius: 50%;
-
- background-color: #f0f0f0;
- transform: rotate(-150deg);
- }
|