给wordpress网站添加一个历程时间轴

一个非常美观的时间轴代码，夏末也是从其他地方看见的，非常喜欢，分享给大家啦

自定义css

首先将以下代码加入你的主题自定义css

div.timenode {
    position:relative;
}
div.timenode:before,div.timenode:after {
    content:'';
    z-index:1;
    position:absolute;
    background:rgba(57,186,232,0.5);
    width:2px;
    left:7px;
}
div.timenode:before {
    top:0px;
    height:6px;
}
div.timenode:after {
    top:26px;
    height:calc(100% - 26px);
}
div.timenode:last-child:after {
    height:calc(100% - 26px - 16px);
    border-bottom-left-radius:2px;
    border-bottom-right-radius:2px;
}
div.timenode .meta,div.timenode .body {
    max-width:calc(100% - 24px);
}
div.timenode .meta {
    position:relative;
    color:#5e5e5e;
    font-size:0.875rem;
    line-height:32px;
    height:32px;
}
div.timenode .meta:before,div.timenode .meta:after {
    content:'';
    position:absolute;
    top:8px;
    z-index:2;
}
div.timenode .meta:before {
    background:rgba(36,136,136);
    width:16px;
    height:16px;
    border-radius:8px;
    -webkit-border-radius:8px;
}
div.timenode .meta:after {
    background:#00d084;
    width:16px;
    height:16px;
    border-radius:8px;
    -webkit-border-radius:8px;
    transform:scale(0.5);
    -webkit-transform:scale(0.5);
    -khtml-transform:scale(0.5);
    -moz-transform:scale(0.5);
    -o-transform:scale(0.5);
    -ms-transform:scale(0.5);
    transition:all 0.28s ease;
    -webkit-transition:all 0.28s ease;
    -khtml-transition:all 0.28s ease;
    -moz-transition:all 0.28s ease;
    -o-transition:all 0.28s ease;
    -ms-transition:all 0.28s ease;
}
div.timenode .meta p {
    font-weight:bold;
    margin:0 0 0 24px;
}
div.timenode .body {
    margin:4px 0 16px 24px;
    padding:16px;
    border-radius:8px;
    -webkit-border-radius:8px;
    background:#f0f0f0;
    display:-webkit-box;
    display:-moz-box;
    display:inline-block;
}
div.timenode .body:empty {
    display:-webkit-box;
    display:-moz-box;
    display:none;
}
div.timenode .body >*:first-child {
    margin-top:0.25em;
}
div.timenode .body >*:last-child {
    margin-bottom:0.25em;
}
div.timenode .body .highlight {
    border:1px solid #e5e5e5;
}
div.timenode:hover .meta {
    color:#181818;
}
div.timenode:hover .meta:before {
    background:#0693e3;
}
div.timenode:hover .meta:after {
    background:#00d084;
    transform:scale(1);
    -webkit-transform:scale(1);
    -khtml-transform:scale(1);
    -moz-transform:scale(1);
    -o-transform:scale(1);
    -ms-transform:scale(1);
}

代码

演示