模擬嗶哩嗶哩導航條模糊效果

2022-02-02 11:01:41 字數 760 閱讀 4307

首先,它的導航條是這樣子的:

以下是我模仿實現的導航條:

要達到這個效果,需要明白實現的思路:

(1)首先,導航條下面有一張,它們不在同一層,將導航條設定為position:absolute;可以實現。

(2)其次,導航條需要時透明的,這樣才能看見下面。需要乙個opcity或者在設定background-color屬性是給乙個alpha值。

(3)導航條要有乙個模糊度,使用filter屬性,給blur設定乙個值可以實現。

按照這個思路走下來,最終實現了這樣乙個效果:

對比一下就能發現,並沒有那個模糊的感覺,不管怎麼調blur的值都不行。當時是有乙個白色背景的,在這個白色背景上設定乙個透明度。可以發現完全不是一回事,最後經過反覆去看嗶哩嗶哩的頁面**,才發現,其實在導航欄的下面是有一張背景的,這個背景和導航欄下面的背景是完全一樣的。所以說在思路上出錯了:

我們不應該去看下面的那張,而是通過給導航欄加背景,去看它自己的,這樣才能達到那樣的效果。其他的不變,給導航欄加乙個background-image屬性,同時overflow:hidden,就搞定了。

模擬嗶哩嗶哩導航條模糊效果

首先,它的導航條是這樣子的 以下是我模仿實現的導航條 要達到這個效果,需要明白實現的思路 1 首先,導航條下面有一張,它們不在同一層,將導航條設定為position absolute 可以實現。2 其次,導航條需要時透明的,這樣才能看見下面。需要乙個opcity或者在設定background col...

嗶哩嗶哩 嗶哩嗶哩,危!!!

以前的時候,唧唧down很好用,不管是網頁還是客戶端,都能滿足要求。最近在用的時候,網頁端老是出問題 用客戶端吧,也感覺沒有以前順手了。兩者都是便攜版,解壓後直接執行主程式,無需安裝。不過唧唧有安裝版,多乙個選擇吧,問題不大,因為我更喜歡便攜版。檔案大小350mb,相比1080p畫質,位元速率提公升...

20190910嗶哩嗶哩

給定乙個陣列,這些數連在一起可以組成乙個大數,求能組成最大數。如 3,30,34,5,9 能組成的最大數為 9534330。由於組成的數可能非常大,用字串返回。include include include include include include include include includ...