网易云音乐背景高斯模糊探索

网易云音乐的音频播放器做的特别赞，尤其是背景模糊效果。有图为证：

那这种效果在 web 中是如何实现的呢？用 Chrome 开发工具看看它的具体实现：

原来是一张图，通过图片的地址，可以看到其实是下面这张图。

看到这里感觉有点小小的失望，本来以为用了什么高科技实现的，却是一张图。但是不得不说，为了实现这种效果他做了很多事情，大多数场景下，服务端并不会给我们提供这样的图，咋么办？

我用 filter 简单实现了一个，效果如下：

仔细看网易云音乐的实现，有一些知识值得我去学习。下面是我不使用模糊图片实现的方式：

1、兜底策略

假如高斯模糊效果图加载不出来需要有一个兜底策略，能够让用户看到播放器上面的文字，比如歌词。他的做法是同时设置 background-image 和 background-color ，这样如果加载不出来图片的时候，使用背景色。那么我的实现方式也做了这个兜底策略：

2、背景前添加一个灰色的蒙层

如果图片有太多的白色，这时如果文字也是白色，导致看不清楚文字，需要一个灰色的蒙层。

3、添加高斯模糊效果，替代图片

大家加油！

推荐阅读：

对象的 key 原来可以使用变量

学习前端的 7 个专题

网易云音乐背景高斯模糊探索相关推荐

网易云音乐数据治理探索与实践
网易云音乐数据治理探索与实践导读:大数据时代的到来,让很多企业看到了数据资产的价值,开始探索应用场景和商业模式,并建设相关技术平台.因此,数据治理成为了挖掘数据价值的重要手段和工具.但数据治理不仅需 ...
Qt之QAbstractAnimation 实现网易云音乐背景墙图片轮换效果
简述最近在做一个小项目,需要实现网易云音乐背景墙的轮换效果,Qt没有封装这样的控件类,只好自己手动实现如下: 效果官方效果: 实现效果: 代码以下是.h代码: #ifndef ANIMATEDW ...
网易云音乐上市首日收跌2.49% 盈利困境仍待解
二次启动IPO计划之后,网易云音乐独立上市终于如愿以偿.12月2日,网易云音乐正式挂牌港交所. 除了线下举行上市仪式外,网易云音乐还通过网易伏羲沉浸式活动系统"瑶台"举办了号称全球 ...
仿网易云音乐日推界面（监听AppBarLayout滑动+动态高斯模糊）
首先来看下日推界面的效果: 网易云音乐日推界面的亮点就是在上拉的时候,banner页面逐渐模糊.字体透明度下降,最后左上角显示出"每日推荐"的字体. 这个界面用户会觉得很清晰.便捷 ...
Android仿网易云音乐播放页面背景虚化碟片效果
1.效果图仿网易云音乐播放页面,主要有4个关键点: 背景虚化.获取音乐的专辑封面,将此图片作为背景图,并进行模糊虚化处理碟片合成.获取音乐的专辑封面,和黑色碟片图片进行合成碟片旋转.音乐播放时, ...
网易云音乐搜索引擎 python+whoosh---(1)背景和环境介绍
最近做<互联网信息搜索与挖掘>的课程作业,作业要求是做一个网易云音乐搜索引擎. 基本要求是: 1,[自由搜索]输入歌曲名称可以返回一系列排序后的歌曲,搜索歌手会根据热门度或其他条件返回一系 ...
pc端网易云音乐可自定义背景插件。
先进入主题. 插件地址:MicroBlock | BetterNCM 效果图: 插件也有许多功能: 教程:先进入我给的网站,点击下载,安装完成后. 是长这样的打开后如果弄了没有反应多半是网易云的 ...
网易云音乐TFBOYS线上演唱会破纪录，稳定线上体验如何实现？
" 8月22日,TFBOYS"日光旅行"七周年演唱会通过网易云音乐与数十万粉丝正式见面,据官方数据显示,这场演唱会的记录最高同时在线人数达78.6万,打破线上付费演唱会世 ...
python 支付宝个人账单_解析2018年度三大用户数据报告——网易云音乐、支付宝、微信...
文章分别给大家简单的解析一下2018年度网易云音乐.支付宝.微信的用户数据报告. 继网易云音乐.支付宝相继发布2018年用户数据报告后,微信也悄悄发布自己的数据报告,截止目前大家期待的三大产品数据报告 ...

网易云音乐背景高斯模糊探索

网易云音乐背景高斯模糊探索相关推荐

最新文章

热门文章