搜狐：10道只有会过日子的人才能答对的题

2017-03-22 H5案例分享 H5案例分享

案例：10道只有会过日子的人才能答对的题

出品：搜狐

亮点：

策划上，测试答题类，① 首屏根据提示进入选择测试类别的界面，选你所熟悉的方向后，会有10道同类的题目；② 用户通过左右滑动调整来确定自己的答案，之后点击确认就可以看到自己跟标准答案之间的差别，点击一起猜则可以分享好友共同测试；③ 当题目全部答完后，会根据你的表现给予你相应的评分跟称号。
设计上，尊贵风格，采用金色作为主色调，按钮采用菱形设计，棕色字体在金色的映衬下，显得奢华而尊贵。
技术上，loading页的画圆圈动画采用的是svg，页面里的小动画多采用的是CSS3的animation。

技术实现： HammerJS

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

识别图中二维码

10道只有会过日子的人才能答对的题-查阅二维码

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

标签