上上周我们的微信朋友圈刷爆了2017支付宝年度账单的h5页面，今天学堂君继续跟大家分享又一个刷爆微信朋友圈的H5，那就是网易云音乐的2017网易云音乐用户年度听歌报告H5.
制作这样一款好看精致的H5，目的是让网易云音乐更进一步通过每位用户这一年的听歌“足迹”，展现音乐对每个人生活的陪伴；并最终传递出，网易云音乐将继续陪伴用户温暖前行。丰富的创意内容如同一个完整的闭环，最终落到每一个具体的个体身上，直击人心，迅速引发用户的广泛参与和深度共鸣。
废话不多说，我们直接来欣赏下网易云音乐H5吧~
H5页面动效如下：
设计上，配色为网易云音乐经典红，每一页都有不同的听歌数据主题，每页的配图也都与主题相贴合，界面简洁，画风清新，背景音乐选用了节奏欢快、旋律清澈的钢琴曲“Christmas-徐梦圆”，整体无论是视觉还是听觉都让人觉得非常舒服。
体验上，案例虽然简单，但给人的感觉还是很精致的，并且案例内容也让人产生了足够的分享及传播欲。一大早，这支H5就在小五票圈悄无声息地刷屏了，朋友们都喜欢将自己的听歌习惯晒出来，跟别人分享喜欢的好歌好曲。2018，又是新的一年，愿大家都能享受音乐所带来的美好。
技术实现： React.JS
全部H5页面设计如下：
需要用网易云音乐APP来打开，才能看到更酷炫的H5动效以及听到优美的音乐。
《2017网易云音乐用户年度听歌报告》H5 记录每位用户这一年的听歌“足迹”。也算是一次不错的网易云音乐品牌营销案例。
首先一个背景，背景图高斯模糊，然后加上遮罩
然后titlebar上面留出位置
下面一个div为了让他自适应高
度
，我们设置为绝对定位，然后top一个titlebar的高
度
，bottom为0，这样就占满整个屏幕
然后播放全部设为粘性布局
position: sticky;
top: 0;
然后他们父盒子元素设置...
网站设计
报告
模板网站设计
报告
模板篇一：《网页设计》课程
报告
模板 《网页设计》课程
报告
学 号: 专 业: 姓 名: 题 目: 设 计
时
间: 电子信息与计算机工程系 XX年11月 目 录 一、设计目的 .............................................................................
网易云音乐
的网页版是没有移动
页面
的，我突发奇想，来做一个玩玩：
http://followyourheart.sina
app
.com/Demos/musicPlayer/Index.
html
主要用到了
Html
5的一些Api跟Css3动画，仅供参考。
这是我第一个GitHub项目，之前一直想在GitHub写点东西，近期又在学前端，刚好学到audio标签，平常
时
也比较喜欢听
音乐
写
代码
，因此就萌生了自己写一个
音乐
播放器的想法。利用了下班和周末的空闲
时
间，用了两周
时
间终于写出来了。当用
代码
一个个地把自己的想法实现出来，那种兴奋和成就感是无与伦比的。甚至周末的
时
候一码就码到通宵，还不觉得累哈哈。因为...
昨天
网易云音乐
、B站等
APP
都放出了
用户
的 2018
年度
使用
报告
，在朋友圈掀起了一股
年度
报告
的热潮，我昨天在刷微博
时
看到”精分君”分享的《
年度
骂人
报告
》后，在被笑得眼泪都出来的同
时
，也在想我是不是也可以出一个《
年度
代码
报告
》呢？
转载随意，文章会持续修订，请注明来源地址：https://zhenbianshu.github.io。
得益于今年工作的稳定，所有本地
代码
仓库...
