がここにHTMLコンポーネント

Question

の余白領域にフェードを適用するHTMLとCSSのサンプルコードです：

HTML

<nav>...</nav> 
<div class="row"></div> 

CSS

.nav{ 
    margin-bottom: 10px; 
} 

私は緩やかにしたいですナビゲーションバーの下端にフェーディング効果があります。

助けてください。これを行うにはどのCSSプロパティを設定する必要がありますか？

Answer 1

navの背景が単色（または「薄れている」部分が1色）の場合、背景のグラデーションを持つ::after擬似要素を追加して、色の退色をシミュレートすることができます。

Here is a demoこれを行う方法。

Answer 2

CSSにフェーディング効果を追加する場合は、opacityのプロパティーが0から1になるように再生できます。次に、このプロパティーをtransitionという別のプロパティーと結合する必要があります。トランジションエフェクトを作成するには、次の2つを指定する必要があります。

• エフェクトを追加するCSSプロパティ。あなたのケースでは、それはopacityです。

だから、効果の持続時間は、あなたのナビゲーションのための不透明度を変更するには、このようなCSSを試すことができます：あなたはjQueryのを知っている場合は

.nav 
{ 
    opacity : 1; 
    margin-bottom: 10px; 
    transition : opacity 2s; 
} 

は、実行する特別な機能がありますa fading in/out effect。

ご希望の場合はお手数ですが、