BiliBili のすりガラスヘッダーの効果をコピー_html/css

BiliBili のすりガラスヘッダーの効果をコピー_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:54:43

オリジナル

1648 人が閲覧しました

BiliBili のヘッダー (メニュー) には、非常に斬新でかわいいすりガラス効果があります:

かわいいと思ったら、口を閉じてください。できるならショット。 Wannian 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 最初にバナーを構築します。

2. バナーに曇りガラスのコンテナを構築します

3. 曇りガラスのコンテナに 2 つの div を配置します。1 つの div は背景をぼかし、もう 1 つの div は透明なガラスの効果を作成します。 🎜>

/**注: 曇りガラスの効果を実現するには、平たく言えば、2 つの div を重ねて配置することです。2 つの div は、実際には同じ背景画像を使用します。1 つは大きな背景で、もう 1 つは曇った小さな背景です。ガラス部分。*/

アイデアを思いついたので、次のステップはそれを実装することです。アイデアは上で徹底的に分析されているので、私のナンセンスを読んで時間を無駄にしないように、コードをすぐ下に投稿します。

コードはこちら

コードを見る前にエフェクトを見てみましょう。レンダリング後の曇りガラスの外観を強調するために、コンテナの高さを大きくしました。コンテンツがないと、少し奇妙に見えます。

コード:

<!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'); は背景ファイルです。これで簡単なマスク効果が完成です。

言葉が多すぎます

bilibili の曇りガラス効果は PC でのみ表示され、携帯電話では表示されないため、この効果は携帯電話ではあまり良くない可能性があります。

また、bilibili のヘッダーは、ブラウザーの全高の一番上に絶対にあります (ブラウザーの表示範囲の一番上に表示されるようにすることはできません)。 (修正済み)、時間が来ると、ユーザーは下にスクロールします。私はこの問題に対して愚かな解決策を思いつきました。

jQuery を導入し、JS コードの任意の部分に次のコンテンツを追加します。

$(document).scroll(function(){    scrollDistance = document.body.scrollTop;            //获取用户滚动的高度    $(".mask-bg").css({"background-position":"center "+((-scrollDistance)+"px")});        //改变 .mask-bg 的 background-position});

ログイン後にコピー

実際、これは、ユーザーがスクロールするときに .mask-bg の背景の位置を常に変更することを意味します。絵のスクロールとシームレスに接続できます。