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

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

Talk is cheap,show me the code!

先上最终效果图

简单到爆炸的页面

准备工作

两张图片，1：小圆点，2：左边的一根竖线

开始撸代码

html代码

    
时间轴
    

        

            

                
            
            
            

                

                    我的2017
                
                

                    
吃饭睡觉写代码
                    2017-12-16 08:08:08
                
            
        
        

            

                
            
            
            

                

                    我的2016
                
                

                    
吃饭睡觉写代码
                    2016-12-16 08:08:08
                
            
        
    

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端的实现吧