最近给移动端写接口,写完了才告诉我其中两个页面是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端的实现吧_
领取专属 10元无门槛券
私享最新 技术干货