给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);
}
代码
演示
欢迎来到夏末笔记xiamo.cc
欢迎来到夏末笔记xiamo.cc
欢迎来到夏末笔记xiamo.cc
提示:本文最后更新于2023年11月23日,如有错误或者已经失效,请留言告知。
版权声明:
作者:夏末沫
链接:https://www.xiamo.cc/53.html
文章版权归作者所有,未经允许请勿转载。
THE END