WordPress免插件制作时间轴

说明

复制 CSS 粘贴到主题设置-->插入代码-->自定义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);
}

代码部署

<div class="timeline">
    <div class="timenode">
        <div class="meta">
            <p></p>
            <p>2021年7月 IPv6适配</p>
            <p></p>
        </div>
        <div class="body">
            <p>全站完成 IPv6 适配，支持 IPv4 + IPv6 双栈访问</p>
        </div>
    </div>
    <div class="timenode">
        <div class="meta">
            <p></p>
            <p>2021年1月 网站备案</p>
            <p></p>
        </div>
        <div class="body">
            <p>完成网安备案</p>
        </div>
    </div>
    <div class="timenode">
        <div class="meta">
            <p></p>
            <p>2019年7月 站点上云</p>
            <p></p>
        </div>
        <div class="body">
            <p>站点除 API 接口外，所有业务全部迁移至阿里云</p>
        </div>
    </div>
</div>

效果演示

原文来自：一个时间轴 - 广然笔记 (rsecc.cn)