蒙牛：20年后你是什么样？

2017-09-15 H5案例分享 H5案例分享

案例：20年后你是什么样？

出品：蒙牛

亮点：

策划上，人脸识别类；20年后的你是什么样的呢，用户可以上传照片，而后选择性别、年龄段，然后回答5道题，并根据用户选择的选项定位出用户的生活习惯，再然后根据这个习惯来判断未来的样子，最后生成2037年的长相，给出相应的评语。
设计上，科技风格，干净透亮的视觉效果，体现了蒙牛干净透亮科学的生产环境，浅蓝色的主色调，蓝色圆球状的分子元素，还有答题部分类似于全息投影仪的背景，都透露着科技感。
技术上，里面的动画主要是采用CSS3的animation来实现的。

技术实现： jQuery + Vue.js

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

识别图中二维码

20年后你是什么样？-查阅二维码

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

标签