Timeline制作工作日志

主题插件和高阶开发, 页面设计
浏览次数 294

感谢鞭策我的甲方们。

如图一个timeline,可以用carousel来代替,工作量集中在两点。

  1. 内容部分,可以用post+grid来制作出各种样式的展示形式;
  2. 下边的bullets部分,需要用到不少css代码。记录如下
.owl-carousel button.owl-dot {
border: 2px solid #fff;
border-radius: 50%;
margin: 0 5%;
}

.color_primary .owl-dot span, .color_secondary .owl-dot span {
background: #fff;
color: inherit;
width: 12px;
height: 12px;
}

.owl-dot.active span
{
background: var(--color-content-primary) !important;
box-shadow: none;
border: 0;
transform: translateY(2px);
}

.owl-carousel button.owl-dot.active {
border: 0;
}

.owl-dot.active:before {
content: "\f3c5";
font-family: "fontawesome";
font-size: 2rem;
display: block;
position: relative;
font-weight: 200;
transform: translateY(-4px);
}

.owl-dots:after {
content: "";
width: 98%;
height: 3px;
display: block;
margin: -15px auto 15px;
background: #fff;
}

.owl-carousel.navpos_outside.navstyle_circle > .owl-nav div:hover, .owl-carousel.navpos_outside.navstyle_block > .owl-nav div:hover {
background: rgba(0, 0, 0, 0.2) !important;
}

思考,

  • 如果背景图也跟着轮换,这套方法依然行得通;
  • 如果下边的bullet加上时间或者标题,则可以用万能的slider revolution来替代。

 

 

 

 

我们将在15分钟内联系你

免费提供行业网站方案以及海外推广计划

菜单