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 addEventListenerif (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);
</script>
</body>
</html>

效果如下图：

css仿支付宝提现到账过程时间轴相关推荐

可以缩放平移的时间刻度尺，方便自定义UI需求。仿萤石云历史录像时间轴
https://github.com/Liberations/TimeRuler TimeRuler [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ijjdgeFo-1 ...
html+css+支付宝页面,CSS仿支付宝菜单，自己亲手写的
CSS仿支付宝菜单 * { padding:0px; margin:0px; list-style:none; } body { font-size:14px; font-family:Verdana ...
时间轴CSS Timeline
下载地址简约的时间轴CSS Timeline,垂直样式的时间轴效果,可以作为事件展示等用途. dd:
仿支付宝支付密码输入框
仿支付宝支付密码输入框前段时间看到小伙伴们在做一个密码输入框,刚好拿来复习下Quartz 2D,不废话,直接上图: 主要思路如下: - UITextField上面覆盖一个UIView - 设置UIV ...
html css 水平时间轴,纯css+js水平时间轴
自定义,并自动加载时间节点当前时间节点居中,突出显示时间动态无痕添加效果图: 初始状态时间左走到一定2016.1月后 html: + - 对应 JS 设置处理: var left = docu ...
html怎么做一条轴,html实现时间轴_纯css实现响应式竖着/垂直时间抽布局效果
1.概述 html实现用时间点来展示事件发生点来代替用table展示一条条数据,能够给人清晰.一目了然能够看清事情发生的过程,UI页面也显示的那么清晰.如何用css+html做出时间轴展示事件点的?先 ...
水平时间轴css代码_使用CSS和JavaScript构建水平时间线
水平时间轴css代码在上一篇文章中 ,我向您展示了如何从头开始构建响应式垂直时间轴. 今天,我将介绍创建相关的水平时间线的过程. 与往常一样,要初步了解我们将要构建的内容,请查看相关的CodePen ...
java 时间轴_如何通过Java实现时间轴过程解析
这篇文章主要介绍了如何通过Java实现时间轴过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.需要添加FastJson的依赖处理数据. c ...
Css打造伸缩时间轴样式的WordPress归档页面archive.php
archive.php文件又称文章归档页面.在WordPress中,文章归档页面是一个非常重要的页面,特别是当你的wordpress网站文章很多的时候,它将文章以年月日的分类方式对文章进行归类,可以 ...
仿呱呱购物流时间轴效果(swift)
仿呱呱购物流时间轴效果(swift): 在呱呱购App二期的优化过程中,发现物流信息详情界面显示的不太友好,由此,修改了部分代码使cell实现自适应,完美显示具体的物流轨迹.我使用了快递鸟的api,将 ...

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

效果如下图：

css仿支付宝提现到账过程时间轴相关推荐

最新文章

热门文章