興味深いことにCSS3実際のケース分析 - （動的勾配の背景）

CSS3の学習のための新機能をよりよく知っていると私たちはCSS3、いくつかの理論的な知識を理解する場合、すべての人の開発効率を向上させるためにいくつかのヒントをまとめるだろうが率いるこの記事の基本的な理論です。

ケース（背景色グラデーション）のために、北京CSS3使用は、色勾配の効果を得ることができます。

HTML部分：

<！DOCTYPE HTML> 
<HTML LANG = " EN " > 
<HEAD> 
  <メタ文字コード= " UTF-8 " > 
  <タイトル>渐变-天际线</ TITLE> 
  <リンクのrel = " スタイルシート"タイプ= " テキスト/ CSS "のhref = " style.cssに" > 
</ HEAD> 
<BODY> 
   <divのクラス = " テキスト" > 
      渐变-天际线
     </ div> 
</ BODY> 
</ HTML>

背景テキストの行のHTML（構造）内の任意の操作を必要としない色のグラデーションを実現する場合に便利ディスプレイ。

CSS一部：

本体{ 
  マージン：0 。
  パディング：0 ; 
  フォント -family：「モントセラトを」。
  背景 -image：リニアグラジエント（125deg、＃E4FFCD、＃6DD5FA、＃2980B9、＃E4FFCD）。背景サイズ：400％; 
  アニメーション：bganimation 15sとの無限。
} 

の.text { 
  色：白。
  テキスト - 整列：センター; 
  テキスト - 変換：大文字; 
  マージン：400ピクセル0 ; 
  フォント - サイズ：22px; 
} 

bganimation {@keyframes 
  0％に{
    背景位：0％50％; 
  } 
  50％{ 
    背景位：100％50％。
  } 
  100％{ 
    背景位：0％50％。
  } 
}

ハイライト：

（透かし変動）の前の部分で、及び上述：https://www.cnblogs.com/LinWenQuan/p/11908979.html

背景画像：リニアグラジエント（）。

線形勾配を作成するための線形勾配（）関数「画像」。線形グラデーションを作成するには、開始点と（角度として指定された）方向トランジション効果を設定する必要があります。あなたは終了色を定義する必要があります。終了色あなたはGeckoのスムーズな移行をしたい、とあなたは少なくとも二つを指定する必要があり、当然のことながら、より複雑なグラデーションを作成するために、より多くの色を指定します。

ここで「125deg」緩やかな傾斜角度が設定されています。

背景の位置：

プロパティは、背景画像の開始位置に設定されています。

壁紙は、この勾配を試すことができます。

背景：白; 

背景 -image：直鎖勾配（90deg、

                  RGBA（200、0、0、。5）50％の透明0 ）、

                  リニア - 勾配（

                  RGBA（200、0、0、。5）50％の透明0 ）。

背景 -size：30px 30px;

興味深いことにCSS3実際のケース分析 - （動的勾配の背景）

おすすめ