移动端H5的简单时间轴效果

最近给移动端写接口,写完了才告诉我其中两个页面是H5的,需要我这边来做。本着“我是公司一块砖,哪里需要哪里搬”的原则,让做就做。结果一看原型,还有时间轴效果。第一反应:找度娘,找github,找oschina~~~确实也有不少的时间轴插件,但是总觉得都太花哨了,大道至简,自己来一个吧。

Talk is cheap,show me the code.

先上最终效果图

准备工作

两张图片

1:小圆点.png

2:左边的一根竖线.png

开始撸代码(HTML部分)

总体概况,用section实现

时间轴部分主要代码

开始撸代码(CSS部分)

气泡效果的小箭头

其他样式定位(包括 时间轴的线和点)

其他说明

1、_这是用的div效果,同时也可以用border-image的气泡效果实现_

2、_以上代码只是手机端的,没有做适配,因此无法放到PC端使用_

3、_技术是为业务服务的,当出现了PC端的需求再做PC端的实现吧_

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20171216G095D000?refer=cp_1026

扫码关注云+社区