模拟哔哩哔哩导航条模糊效果

2018-06-24 00:38:06来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

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

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:HTML基本组成结构与标签的认识

下一篇:前端实践总结