腾讯：QQ钱包可以充公交卡啦

2016-12-26 H5案例分享 H5案例分享

案例：QQ钱包可以充公交卡啦

出品：腾讯

亮点：

策划上，故事场景类，通过三个情景，显示每个人所在的地理位置，表现出三个人物在较为着急的情况下需要充值公交卡，但充值的最近位置也需要20分钟的时间，而通过QQ钱包碰一碰即可在线充值，展现出QQ钱包的便捷性。
设计上，写实风格，采用黄色作为主色调，模拟真实场景，增进距离感；特殊字体，萌哒哒的，很有趣哦
技术上，人物动画主要采用的是，CSS3的steps属性切换CSS雪碧图序列帧的方式来实现的，按钮主要采用的是gif动图。

技术实现： JavaScript

案例演示，请长按/扫描以下二维码 ->

识别图中二维码

QQ钱包可以充公交卡啦-查阅二维码

以上为“H5案例分享”团队原创文章，转载请注明出处！

标签