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

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

原文发布于微信公众号 - 陌与尘埃(grq100296)

原文发表时间:2017-12-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端杂货铺

尽量使用translate而不是改变top/left进行动画(翻译)

前言     本文翻译自 Why Moving Elements With Translate() Is Better Than Pos:abs Top/lef...

30340
来自专栏前端新视界

如何使用纯 CSS 制作四子连珠游戏

实验是学习新技巧、思考新想法、并突破自身极限的有趣的方式。“纯 CSS”演示很早就有了,但是随着浏览器和CSS的发展,新的挑战又出现了。CSS 和 HTML 预...

12920
来自专栏练小习的专栏

带你轻松打开SVG动画的大门

初学SVG的时候,感觉那一坨一坨的代码难读难懂,现在回过头仔细想想,是因为那时候看文档缺少一些具体的实例,导致学习起来很枯燥。如今SVG已经在前端各个领域都有所...

24160
来自专栏Thinks

带你轻松打开SVG动画的大门

初学SVG的时候,感觉那一坨一坨的代码难读难懂,现在回过头仔细想想,是因为那时候看文档缺少一些具体的实例,导致学习起来很枯燥。如今SVG已经在前端各个领域都有所...

16520
来自专栏MixLab科技+设计实验室

设计师会编程、程序员懂艺术之设计规范

以下为正文 UI&UX类的设计规范,不像建筑设计、工业设计那样,有比较成熟权威的设计规范。大多是各家发布的设计规范,用于自家产品、品牌的设计复用。 本文从 设计...

43160
来自专栏数据小魔方

图表案例|全球游戏行业用户渠道调查报告(尼尔森)

今天要跟大家分享的是一个尼尔森的典型图表案例——全球游戏行业用户渠道调查报告! 而且本图表是一个使用单选按钮的动态图表,非常适合作为案例来讲,同时可以巩固一下最...

39880
来自专栏Thinks

谈响应式web设计代码实现

在研究响应式的时候,记录了一些感想,分享出来,抛砖引玉,希望可以和大家一起讨论。总结下来,响应式比之前想象的要复杂得多。 1. ie9以下(不包括ie9)采用i...

6410
来自专栏腾讯社交用户体验设计

H5动效的常见制作手法 - 腾讯ISUX

64720
来自专栏IMWeb前端团队

rem不是神农草,治不了移动端百病

有很多朋友一聊起做移动端重构,第一个问题就是用什么单位合适。%,还是rem?(如果你还不太了解rem是什么单位,可先前往CSS3的REM设置字体大小了解。) 然...

227100
来自专栏我爱编程

初识HTML5

客观地讲,没有不好的技术,只有没有用好的技术。JavaScript 的坎坷遭遇让我不禁想起了另一种被人们滥用的技术:Adobe公司研发的 Flash。

22120

扫码关注云+社区

领取腾讯云代金券