58 lines
1.2 KiB
CSS
58 lines
1.2 KiB
CSS
.dv-scroll-ranking-board {
|
|
width: 100%;
|
|
height: 100%;
|
|
color: #fff;
|
|
overflow: hidden;
|
|
}
|
|
.dv-scroll-ranking-board .row-item {
|
|
transition: all 0.3s;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
.dv-scroll-ranking-board .ranking-info {
|
|
display: flex;
|
|
width: 100%;
|
|
font-size: 13px;
|
|
}
|
|
.dv-scroll-ranking-board .ranking-info .rank {
|
|
width: 40px;
|
|
color: #1370fb;
|
|
}
|
|
.dv-scroll-ranking-board .ranking-info .info-name {
|
|
flex: 1;
|
|
}
|
|
.dv-scroll-ranking-board .ranking-column {
|
|
border-bottom: 2px solid rgba(19, 112, 251, 0.5);
|
|
margin-top: 5px;
|
|
}
|
|
.dv-scroll-ranking-board .ranking-column .inside-column {
|
|
position: relative;
|
|
height: 6px;
|
|
background-color: #1370fb;
|
|
margin-bottom: 2px;
|
|
border-radius: 1px;
|
|
overflow: hidden;
|
|
}
|
|
.dv-scroll-ranking-board .ranking-column .shine {
|
|
position: absolute;
|
|
left: 0%;
|
|
top: 2px;
|
|
height: 2px;
|
|
width: 50px;
|
|
transform: translateX(-100%);
|
|
background: radial-gradient(#28f8ff 5%, transparent 80%);
|
|
animation: shine 3s ease-in-out infinite alternate;
|
|
}
|
|
@keyframes shine {
|
|
80% {
|
|
left: 0%;
|
|
transform: translateX(-100%);
|
|
}
|
|
100% {
|
|
left: 100%;
|
|
transform: translateX(0%);
|
|
}
|
|
}
|