[转载]技能点数条条

作者：@风牛马 今逛一博，偶发趣物，遂藏之，备后改之。

行吧想整个文言文来臭屁一下，结果就是，我的语文基本还给老师了，就不丢人了。直接上效果图。

就是这个模样，但是我准备之后改成技能点或者其他些什么，因为我发现这个时间是固定的，不会动的，就……上代码：

这个是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了，然后抽空，再来折腾自家的技能点数啦~