最近给移动端写接口，写完了才告诉我其中两个页面是H5的，需要我这边来做。本着“我是公司一块砖，哪里需要哪里搬”的原则，让做就做。结果一看原型，还有时间轴效果。第一反应：找度娘，找github，找oschina~~~确实也有不少的时间轴插件，但是总觉得都太花哨了，大道至简，自己来一个吧。
Talk is cheap,show me the code!
先上最终效果图
简单到爆炸的页面
准备工作
两张图片，1：小圆点，2：左边的一根竖线
开始撸代码
html代码
<body>
<div>
<h3>时间轴</h3>
<section class="timeline" style="">
<div class="timeline-block">
<div class="ctimeline-img cd-picture">
<img src="/images/point.png" alt="Picture">
</div>
<span class="item dot-top"></span>
<div class="r-info">
<div>
<text style="margin: -21px">我的2017</text>
</div>
<div class="msgBox">
<div>吃饭睡觉写代码</div>
<span class="cd-date">2017-12-16 08:08:08</span>
</div>
</div>
</div>
<div class="timeline-block">
<div class="ctimeline-img cd-picture">
<img src="/images/point.png" alt="Picture">
</div>
<span class="item dot-top"></span>
<div class="r-info">
<div>
<text style="margin: -21px">我的2016</text>
</div>
<div class="msgBox">
<div>吃饭睡觉写代码</div>
<span class="cd-date">2016-12-16 08:08:08</span>
</div>
</div>
</div>
</section>
</div>
</body>
css样式
body {
text-align: center;
font-size: 14px;
line-height: 1.5rem;
margin: auto;
}
.timeline {
position: relative;
text-align: left;
}
.timeline::before {
content: '';
position: absolute;
top: 0;
left: 18px;
height: 100%;
width: 2px;
background: url("/images/v-line.png");
}
.ctimeline-img {
position: relative;
left: 12px;
top: 15px;
width: 13px;
height: 13px;
}
.cd-date {
font-size: 12px;
color: #cccccc;
}
.item {
float: left;
clear: both;
margin-bottom: 23px;
}
/* 向上的箭头 */
.dot-top {
position: relative;
top: 21px;
left: 3rem;
font-size: 0;
line-height: 0;
border: 10px dashed #eeeeee;
border-top-width: 0;
border-right-color: transparent;
border-bottom-style: solid;
border-left-color: transparent;
}
.msgBox {
border: 2px solid #eeeeee;
width: 100%;
padding: 2%;
margin-top: 2%;
}
.r-info {
position: relative;
top: 0px;
left: 30px;
width: 80%
}
其他说明
1、这是用的div效果，同时也可以用border-image的气泡效果实现
2、以上代码只是手机端的，没有做适配，因此无法放到PC端使用
3、技术是为业务服务的，当出现了PC端的需求再做PC端的实现吧
网友评论