网易云音乐html代码报告,网易云音乐H5案例欣赏：你的2017年度听歌报告

上上周我们的微信朋友圈刷爆了2017支付宝年度账单的h5页面，今天学堂君继续跟大家分享又一个刷爆微信朋友圈的H5，那就是网易云音乐的2017网易云音乐用户年度听歌报告H5.

制作这样一款好看精致的H5，目的是让网易云音乐更进一步通过每位用户这一年的听歌“足迹”，展现音乐对每个人生活的陪伴；并最终传递出，网易云音乐将继续陪伴用户温暖前行。丰富的创意内容如同一个完整的闭环，最终落到每一个具体的个体身上，直击人心，迅速引发用户的广泛参与和深度共鸣。

废话不多说，我们直接来欣赏下网易云音乐H5吧~

H5页面动效如下：

设计上，配色为网易云音乐经典红，每一页都有不同的听歌数据主题，每页的配图也都与主题相贴合，界面简洁，画风清新，背景音乐选用了节奏欢快、旋律清澈的钢琴曲“Christmas-徐梦圆”，整体无论是视觉还是听觉都让人觉得非常舒服。

体验上，案例虽然简单，但给人的感觉还是很精致的，并且案例内容也让人产生了足够的分享及传播欲。一大早，这支H5就在小五票圈悄无声息地刷屏了，朋友们都喜欢将自己的听歌习惯晒出来，跟别人分享喜欢的好歌好曲。2018，又是新的一年，愿大家都能享受音乐所带来的美好。

技术实现： React.JS

全部H5页面设计如下：

需要用网易云音乐APP来打开，才能看到更酷炫的H5动效以及听到优美的音乐。

《2017网易云音乐用户年度听歌报告》H5 记录每位用户这一年的听歌“足迹”。也算是一次不错的网易云音乐品牌营销案例。