抄走 BiliBili 的毛玻璃 header 效果_html/css_WEB-ITnose
- WBOY原創
- 2016-06-21 08:54:431651瀏覽
BiliBili 上的 header（菜单）有一个很新奇、可爱的毛玻璃效果：
既然觉得可爱的话，能动手的就尽量不要嘴炮了。万年 F12 走天下的我决定把这个效果高调地搬走。
分析目标
通过 F12 获取到的毛玻璃效果代码如下：
<div class="z_top_container"> <div class="z_top b-header-blur"> <div class="b-header-mask-wrp"> <div class="b-header-mask-bg" style="background-image: url(xxxxxxxxx);"></div> <div class="b-header-mask"></div> </div> </div></div>
（以上代码已经过整理，并且去除菜单有关的 DOM）
经过对上面的代码进行分析，我们可以很清晰的看到 BiliBili 前端对这个效果的实现方法：
1.首先当然是构造一个 banner 啦
2.在 banner 里构造一个毛玻璃的容器
3.毛玻璃容器中置入两个 div，一个 div 放的是模糊的背景，另一个 div 做出透明的玻璃效果
/** 注：对于实现毛玻璃的效果这个做法，通俗一点讲就是放两个叠放着的 div，两个 div 用的其实是同样一张背景图片，其中一个作为大背景，另外一个作为小背景，就是毛玻璃的部分。 */
有了思路，下一步就是去实现啦。由于上面已经分析透了思路，下面就直接贴出代码，不浪费各位的时间看我废话。
代码看这里
在看代码之前先看看效果，为了突出毛玻璃渲染后的样子，我把容器的高度加高了一些，加上没有内容，看起来也就奇怪了一点。
代码：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Mask</title> <style type="text/css"> html, body{ width: 100%; height: 100%; margin: 0; } .mask-container{ height: 200px; width: 100%; box-shadow: rgba(0,0,0,0.3) 0 2px 2px; position: relative; } .mask-bg{ width: 100%; height: 220px; position: absolute; top: -10px; filter: blur(10px); -webkit-filter:blur(10px); -moz-filter:blur(10px); -o-filter:blur(10px); } .mask{ width: 100%; height: 200px; position: absolute; background: rgba(255,255,255,0.4); top: 0; } .banner, .mask-bg{ background-image: url('background.jpg'); background-size: cover; background-position: center 0px; background-repeat: no-repeat; } .banner{ width: 100%; height: 100%; z-index: -1; } </style></head><body> <div class="banner"><!--设置背景--> <div class="mask-container"><!--构造毛玻璃容器--> <div class="mask-bg"></div><!--毛玻璃的背景--> <div class="mask"></div><!--毛玻璃中的内容--> </div> </div></body></html> 其中 background-image: url('background.jpg'); 就是你的背景文件啦。这样简单的 mask 效果就完成啦。
话多
由于 bilibili 的毛玻璃特效只在 PC 上可以看到，手机上没有，所以这个效果在手机上可能就不是那么的好。
另外，bilibili 的 header 是绝对在浏览器总高度最顶端（不会悬浮在浏览器可视范围最顶层），如果我想让它在最顶层（fixed）的话， 用户下滚的时候就露馅啦。 对这个问题我想了一个比较蠢的办法解决。
引入 jQuery，在任意的一段 JS 代码中加入以下内容:
$(document).scroll(function(){ scrollDistance = document.body.scrollTop; //获取用户滚动的高度 $(".mask-bg").css({"background-position":"center "+((-scrollDistance)+"px")}); //改变 .mask-bg 的 background-position}); 事实上就是在用户滚动的时候不停地改变 .mask-bg 的 background-position 使之和图片的滚动无缝衔接就可以了。