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

来源:简书分类: 文章浏览史发布时间:2020-08-28 22:52:58 最后更新:2020-08-28 浏览:456

转载声明：

本文为摘录自“简书”，版权归原作者所有。

原文链接:

https://www.jianshu.com/p/125238cb7e61

温馨提示：

为了更好的体验，请点击原文链接进行浏览

摘录时间：

2020-08-28 22:52:58

最近给移动端写接口，写完了才告诉我其中两个页面是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端的实现吧