你的位置:首页 > 网页设计

[网页设计]模拟哔哩哔哩导航条模糊效果


在自己之前做的一个视频播放的网站的项目中,由于没有专业的设计,只有一个PS大神。所以在做页面的时候,如何布局如何设计页面的责任就落在了我这个前端学徒工的身上。
那时候自己用的最熟练的就是盒子模型,所以我就会把页面整体划分为一个一个的盒子,盒子间的互相嵌套构成了整个页面。第一个难点就是做一个导航条,如果仅仅是做一个导航条并不复杂,但自己初生牛犊不怕虎,觉得必须做一个有逼格的导航条,所以一眼就瞄上了自己最喜欢的视频播放网站——哔哩哔哩。

首先,它的导航条是这样子的:

 
这是我发布这篇文章时截的图,距离我做那个项目已经过去两三个月了,可见这种导航条是多么受欢迎Y(^o^)Y。
以下是我模仿实现的导航条:

要达到这个效果,需要明白实现的思路:
(1)首先,导航条下面有一张图片,它们不在同一层,将导航条设置为position:absolute;可以实现。
(2)其次,导航条需要时透明的,这样才能看见下面。需要一个opcity或者在设置background-color属性是给一个alpha值。
(3)导航条要有一个模糊度,使用filter属性,给blur设置一个值可以实现。
按照这个思路走下来,最终实现了这样一个效果:
对比一下就能发现,并没有那个模糊的感觉,不管怎么调blur的值都不行。当时是有一个白色背景的,在这个白色背景上设置一个透明度。可以发现完全不是一回事,最后经过反复去看哔哩哔哩的页面代码,才发现,其实在导航栏的下面是有一张背景图片的,这个背景图片和导航栏下面的背景图片是完全一样的。所以说在思路上出错了:
我们不应该去看下面的那张图片,而是通过给导航栏加背景图片,去看它自己的图片,这样才能达到那样的效果。其他的不变,给导航栏加一个background-image属性,同时overflow:hidden,就搞定了。