UPToZ
d19c1191ef
detailed： 1.增加了侧栏中的小板报、最新评论、最近发布、爱发电、广告、文章目录、分类的图标颜色。 2.增加了对侧栏的广告图片鼠标移入图片轻微放大的效果。 3.增加了爱发电API请求失败时的默认显示。 4.修改了侧栏中的标题与图标之间的间距。 5.修改了侧栏中爱发电内容区域的边距。
90 lines
1.4 KiB
CSS
90 lines
1.4 KiB
CSS
.timeline {
|
|
width: 100%;
|
|
height: 2rem;
|
|
background-color: var(--heo-background);
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin-bottom: 20px;
|
|
border-radius: 1.5rem;
|
|
}
|
|
|
|
.progress {
|
|
width: 0;
|
|
height: 100%;
|
|
background-color: var(--heo-main);
|
|
position: absolute;
|
|
animation: progressAnimation 2s linear forwards;
|
|
animation-delay: -0.1s;
|
|
border-radius: 1.5rem
|
|
}
|
|
|
|
.past-time {
|
|
width: 2px;
|
|
height: 20px;
|
|
background-color: #3498db;
|
|
position: absolute;
|
|
transform-origin: left;
|
|
animation: pastTimeAnimation 3s linear forwards;
|
|
}
|
|
|
|
.percentage-label {
|
|
position: absolute;
|
|
left: 0;
|
|
font-size: 14px;
|
|
color: var(--heo-card-bg);
|
|
font-weight: bold;
|
|
top: 10px;
|
|
white-space: nowrap;
|
|
transition: left 0.5s linear;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.time-labels {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
}
|
|
|
|
.time-labels>div {
|
|
font-size: 14px;
|
|
color: var(--heo-fontcolor);
|
|
}
|
|
|
|
@keyframes progressAnimation {
|
|
0% {
|
|
width: 0;
|
|
}
|
|
|
|
100% {
|
|
width: var(--progress-percentage, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes pastTimeAnimation {
|
|
0% {
|
|
transform: scaleX(0);
|
|
}
|
|
|
|
100% {
|
|
transform: scaleX(var(--past-time-percentage, 0));
|
|
}
|
|
}
|
|
|
|
.timeline:hover {
|
|
animation: btn31-eff 3s linear infinite;
|
|
cursor: pointer;
|
|
}
|
|
|
|
@keyframes btn31-eff {
|
|
0% {
|
|
box-shadow: 0 0 2px var(--heo-main);
|
|
}
|
|
|
|
50% {
|
|
box-shadow: 0 0 40px var(--heo-main);
|
|
}
|
|
|
|
100% {
|
|
box-shadow: 0 0 2px var(--heo-main);
|
|
}
|
|
} |