css仿支付宝提现到账过程时间轴

本来想找一个现成的仿支付宝提现的时间轴，才发现没有，我觉得不应该啊，又找了一会还是没哟，算了，自己写一个吧，分享出来，有需要的朋友可以直接拿走。

需要：1、iconfont（阿里巴巴矢量图标库找个图标，我已经找下了，你不想用也可以自己再找）

2、在移动端，我已经写好rem.js，750px/100即可

直接上代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>进度处理</title>
    <style>
        @font-face {
            font-family: 'iconfont';  /* project id 924372 */
            src: url('//at.alicdn.com/t/font_924372_bygyugzn79.eot');
            src: url('//at.alicdn.com/t/font_924372_bygyugzn79.eot?#iefix') format('embedded-opentype'),
            url('//at.alicdn.com/t/font_924372_bygyugzn79.woff') format('woff'),
            url('//at.alicdn.com/t/font_924372_bygyugzn79.ttf') format('truetype'),
            url('//at.alicdn.com/t/font_924372_bygyugzn79.svg#iconfont') format('svg');
        }
        li{
            list-style: none;
        }
       .schedule .protext{
            font-size: .28rem;
            float: left;
            margin-top:.15rem;
            margin-left: .35rem;
        }
        .schedule .time{
            color:#8B8B8B;
            font-size: .2rem;
            font-weight: 400;
            float: right;
            margin-top:.15rem;
        }

        .times ul{
            margin-left: 2rem;
        }
        .times ul li {
            height:.5rem;
            width:4rem;
            position: relative;
            padding:.25rem 0;
            line-height: .2rem;
            border-left: .02rem solid #0D8CE9;
            color:#0D8CE9;
        }
        .times ul li.not{
            border-left:.02rem solid #A7A7A7;
            color:#A7A7A7;
        }
        .times ul li#not{
            padding-bottom:0;height:.3rem;
        }
        .icon {
            font-size: .31rem;
            position: absolute;
            left:-.15rem;
            font-family: iconfont;
            display: inline-block;
            background-color: #fff;
            padding: .1rem 0;
        }

    </style>
</head>
<body>

<li class="schedule">
    <h6>处理进度</h6>
    <div class="times">
        <ul>
            <li id="payment" style="padding-top:0;"><div class="icon">&#xe658;</div><div class="protext">付款成功</div><div class="time">11-10  08:40</div></li>
            <li id="process"><div class="icon">&#xe658;</div><div class="protext">处理中</div><div class="time">11-10  08:40</div></li>
            <li id="not" class="not"><div class="icon">&#xe658;</div><div class="protext">到账成功</div><div class="time">11-10  08:40</div></li>
        </ul>
    </div>

</li>
<script>
    var fonSize = 0;
    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                fonSize = 100 * (clientWidth / 750);
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            };

        // Abort if browser does not support addEventListener
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>
</body>
</html>

css仿支付宝提现到账过程时间轴

效果如下图：

猜你喜欢