作者:@风牛马 今逛一博,偶发趣物,遂藏之,备后改之。
行吧想整个文言文来臭屁一下,结果就是,我的语文基本还给老师了,就不丢人了。直接上效果图。

就是这个模样,但是我准备之后改成技能点或者其他些什么,因为我发现这个时间是固定的,不会动的,就……上代码:
这个是CSS代码,直接放在主题的 style.css 文件的最下面。
/*人生倒计时*/
.aside-count .content {
padding:15px
}
.aside-count .content .item {
margin-bottom:15px
}
.aside-count .content .item:last-child {
margin-bottom:0
}
.aside-count .content .item .title {
font-size:14px;
color:#909399;
margin-bottom:5px;
display:flex;
align-items:center
}
.aside-count .content .item .title span {
color:#eaa04b;
font-weight:500;
font-size:14px;
margin:0 5px
}
.aside-count .content .item .progress {
display:flex;
align-items:center
}
.aside-count .content .item .progress .progress-bar {
height:10px;
border-radius:5px;
overflow:hidden;
background:#ebeef5;
width:0;
min-width:0;
flex:1;
margin-right:5px
}
.aside-count .content .item .progress .progress-bar .progress-inner {
width:0;
height:100%;
border-radius:5px;
transition:width 0.35s;
-webkit-animation:progress 750ms linear infinite;
animation:progress 750ms linear infinite
}
.aside-count .content .item .progress .progress-bar .progress-inner-1 {
background:#bde6ff;
background-image:linear-gradient(135deg,#50bfff 25%,transparent 25%,transparent 50%,#50bfff 50%,#50bfff 75%,transparent 75%,transparent 100%);
background-size:30px 30px
}
.aside-count .content .item .progress .progress-bar .progress-inner-2 {
background:#ffd980;
background-image:linear-gradient(135deg,#f7ba2a 25%,transparent 25%,transparent 50%,#f7ba2a 50%,#f7ba2a 75%,transparent 75%,transparent 100%);
background-size:30px 30px
}
.aside-count .content .item .progress .progress-bar .progress-inner-3 {
background:#ffa9a9;
background-image:linear-gradient(135deg,#ff4949 25%,transparent 25%,transparent 50%,#ff4949 50%,#ff4949 75%,transparent 75%,transparent 100%);
background-size:30px 30px
}
.aside-count .content .item .progress .progress-bar .progress-inner-4 {
background:#67c23a;
background-image:linear-gradient(135deg,#4f9e28 25%,transparent 25%,transparent 50%,#4f9e28 50%,#4f9e28 75%,transparent 75%,transparent 100%);
background-size:30px 30px
}
.aside-count .content .item .progress .progress-percentage {
color:#909399
}
@-webkit-keyframes progress {
0% {
background-position:0 0
}
100% {
background-position:30px 0
}
}@keyframes progress {
0% {
background-position:0 0
}
100% {
background-position:30px 0
}
}@-webkit-keyframes drawing {
100% {
stroke-dashoffset:-400
}
}@keyframes drawing {
100% {
stroke-dashoffset:-400
}}
接着是内容的主体,在页面插入HTML代码,丢进去就好了,或者是小工具添加HTML代码,一样丢进去,就是这么简单。
<div class="aside aside-count">
<div class="post_title post_detail_title">
<h2>人生倒计时</h2>
<span class="date"></span>
</div>
<div class="content">
<div class="item" id="dayProgress">
<div class="title">今日已经过去<span>10</span>小时</div>
<div class="progress">
<div class="progress-bar">
<div class="progress-inner progress-inner-1" style="width: 44%;"></div>
</div>
<div class="progress-percentage">44%</div>
</div>
</div>
<div class="item" id="weekProgress">
<div class="title">这周已经过去<span>4</span>天</div>
<div class="progress">
<div class="progress-bar">
<div class="progress-inner progress-inner-2" style="width: 57%;"></div>
</div>
<div class="progress-percentage">57%</div>
</div>
</div>
<div class="item" id="monthProgress">
<div class="title">本月已经过去<span>21</span>天</div>
<div class="progress">
<div class="progress-bar">
<div class="progress-inner progress-inner-3" style="width: 67%;"></div>
</div>
<div class="progress-percentage">67%</div>
</div>
</div>
<div class="item" id="yearProgress">
<div class="title">今年已经过去<span>1</span>个月</div>
<div class="progress">
<div class="progress-bar">
<div class="progress-inner progress-inner-4" style="width: 8%;"></div>
</div>
<div class="progress-percentage">8%</div>
</div>
</div>
</div>
</div>
嗯,对了,还有标题的样式也能单独设置,看下面的代码,也是塞在style.css里面的。
.post .post_detail_title h2 {
font-size:1.4rem;
font-weight:700
}
.post .post_detail_title h2 {
background: linear-gradient(to bottom,transparent 60%,rgb(255 106 106 / 35%) 0) no-repeat;
width: auto;
display: table;
}
去试试看吧,我要先去看会FATE了,然后抽空,再来折腾自家的技能点数啦~