css排行榜图标设计 |css3 球面轨迹运动

/* 第一种图标：序号圆圈 */
.number {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 50%;
font-size: 14px;
line-height: 24px;
text-align: center;
background-color: #dcdcdc;
font-weight: bold;
margin-right: 10px;
}
/* 第二种图标：箭头 */
.arrow {
margin-right: 10px;
height: 20px;
width: 20px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.arrow-up {
background-image: url("up-arrow.svg");
}
.arrow-down {
background-image: url("down-arrow.svg");
}
/* 第三种图标：徽章 */
.badge {
display: inline-block;
padding: 2px 5px;
font-size: 12px;
border-radius: 4px;
color: white;
text-transform: uppercase;
font-weight: bold;
margin-right: 10px;
}
.first-place {
background-color: #ff3b30;
}
.second-place {
background-color: #ff9500;
}
.third-place {
background-color: #ffcc00;
}

以上就是三种常用的CSS排行榜图标设计，可以根据具体的需求选择使用哪种。通过运用这些图标，可以让排行榜变得更加美观和易于理解。