腾讯：2015年全国统一网络高考

2016-06-29 H5案例分享 H5案例分享

案例：2015年全国统一网络高考

出品：腾讯

亮点：

策划上，测试答题类，模拟高考，① 共有5道“高考题”，不是常规的点击选项来答题，而是模拟高考，在题的下方答题卡区域，选择A或B或C或D，然后出来一个用2B铅笔涂答题卡的动效，仿佛真的坐在高考考场答题；② 答完，填报志愿，选择感觉自己能考上的学校；③ 查看自己是否考上了自己选择的大学，点击“再考一次”，即可再次体验高考，但是出来的题目会有变动哦
设计上，采用棕色的木纹作为背景，仿佛高考考场的桌子；答题的背景采用的是考试纸张，还有答题卡的答题形式，这些都很有高考气息
技术上，涂答题卡的动效，原理是通过background-position来定位雪碧图上的背景显示区域，再通过控制显示的时间间隔形成动画效果

技术实现： jQuery

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

识别图中二维码

2015年全国统一网络高考-查阅二维码

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

标签