1. リニア知識CSS背景：重複した「イメージ」を作成するための直線勾配繰り返し線形勾配
CSSの構文
背景：繰り返し- リニア- 勾配（角度| 側に- または- コーナー、色- ストップ1 、色- STOP2 、...）;
| 値 | 説明 |
|---|---|
| 角度 | 勾配の方向の角度として定義されます。0degから360degに、デフォルトでは原稿180°です。 |
| サイドまたはコーナー | 線形勾配は開始位置指定しました。二つのキーワード：最初の水平位置（左または右）を指定し、第二の垂直位置（上または下）を指定しました。ご注文は、各キーワードはオプションで、ランダムです。 |
| カラーストップ1、カラーストップ2、... | 指定階調の開始および終了色、色の値、（あるいは、指定されたパーセンテージを使用して）停止位置組成物。 |
原則のdiv父と息子
親のdiv DIVサブの幅よりも小さく、線形勾配によって示すサブDIVスタイルランタンは、回転ドアを実行する効果は、変位はサブJS DIVを制御することによって達成されます。
コード
1 <！DOCTYPE HTML > 2 < HTML > 3 < ヘッド> 4 < メタのcharset = "UTF-8" > 5 < タイトル> </ タイトル> 6 < スタイル> 7 * { 8 マージン：0 。 9 パディング：0 。 10 } 11 本体{ 12 の高さ：100％; 13 幅：100％ 。 14 高さ：100％ 。 15 } 16 .wrap { 17 18 幅：400ピクセル。 19 高さ：40ピクセル; 20 マージン：0自動; 21 マージントップ：40ピクセル; 22 境界：1ピクセル黒一色。 23 オーバーフロー：隠されました; 24 } 25 .wrap> .inner { 26 背景：繰り返す直線勾配（60deg、白0PX、白10pxの、黒10pxの、黒色20ピクセル）。 27 高さ：40ピクセル; 28 幅：600PX 。 29 } 30 31 </ スタイル> 32 </ ヘッド> 33 < ボディ> 34 < DIV クラス= "ラップ" > 35 <DIV クラス= "内側" > </ DIV > 36 </ DIV > 37 </ ボディ> 38 < スクリプトタイプ= "テキスト/ javascriptの" > 39 VAR インナー= document.querySelector（" .wrap> .inner " ）。 40 VaRのフラグ= 0 。 41 // 鼠标移入 42 のvar タイマー。 43 inner.onmouseover = 関数（）{ 44 、タイマ=window.setInterval（関数（）{ 45 中のフラグ- ; 46である IF （のフラグ== - 200である）{ 47 、フラグ= 0 ; 48 } 49 inner.style.marginLeft = フラグに+ " PX " ; 50 }、5。 ） 51れます } 52 // てclearInterval制御のsetIntervalアウトマウス 53である inner.onmouseout = 関数（）{ 54、IS clearInterval（タイマー）。 55 } 56 57 </ スクリプト> 58 </ HTML >