html - css導覽列模糊,導覽列固定,隨著頁面滑動對下方頁面產生模糊效果,如何實現?
大家讲道理
大家讲道理 2017-05-24 11:36:02
0
2
1096

#找了半天網路上沒找到能夠動態影響下方頁面,使其模糊的解決。
這是b站的一個模糊效果,靜態的,原理是使用兩張一樣的圖片,一張取部分模糊和另一張拼合。

我的想法是類似AE的調節層加個高斯模糊,對下方圖層有即時影響(頁面滑動)
css的濾鏡好像不能作用於下方圖層,只能作用於某元素本身。

初學前端,請大佬們指點!

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回覆(2)
PHPzhong

其實大部分情況b站的那種假模糊就足夠使用了
你要的效果也能實現,挺麻煩的,兼容性還差,初入前端還是不要去折騰這種沒啥太大意義的東西了,當然程式碼也是有的,我這裡給個css3實現毛玻璃效果的demo,你自己可以看著能否觸類旁通

body, main::before {
    background: url("tiger.jpg") 0 / cover fiexed;
}
main {
    positon: relative;
    background: hsla(0, 0%, 100%, .3);
    overflow: hidden;
}
main::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    filter: blur(20px);
    margin: -30px;
}
给我你的怀抱

使用CSS3 - filter濾鏡屬性,模糊效果的值為blur(模糊值px),而導航固定就用position屬性,固定定位值為fixed。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板