興味深いことにCSS3実際のケース分析 - （透かしの変動）

それを学ぶCSS3の新機能に精通し、基本的な理論です、

私たちはCSS3、いくつかの理論的な知識を理解するケースが率いるこの記事では、すべての人の開発効率を向上させるためにいくつかのヒントを総括します。

（透かしのボラティリティ）のためのケースは、長い間良い結果がCSS3の拡散層を水線使用して達成することができるようとして、ない書き込みJSのアニメーションを行います。

<<！DOCTYPE HTML>
<HTML>
<ヘッド>
<スタイル> 
.wave { 
    マージン -left：自動; margin- 右：自動;
    幅：100ピクセル; 高さ：100pxに。
    国境 - 半径：100ピクセル;
    ボーダー：2ピクセル固体#FFF; 
    行 - 高さ：100pxに。
    背景：＃06Cなし - 繰り返し中央センター。
    背景 -size：100％;
    アニメーション：波4Sリニア無限。 
    } 
@keyframesウェーブ{ 
        0％{ボックスシャドウ：0  0  0  0 RGBA（245、226、226、1）0  0  0  0 RGBA（250、189、189、1 ）。
         } 
        50％{ボックスシャドウ：0  0  0 20ピクセルRGBA（245、226、226、。5）、0  0  0 10pxのRGBA（250、189、189、1 ）。
         }
        100％{ボックスシャドウ：0  0  0 40ピクセルRGBA（245、226、226、0）、0  0  0 20ピクセルRGBA（245、226、226、0 ）; }
         } 
</スタイル>
    <タイトル>透かし変動の影響</ TITLE>
</ head>の
<身体>
 <のdiv クラス = " 波" </ DIV>>
</ BODY>
</ HTML>

メイン重いと難しいです。

1.境界半径（丸い境界に添加DIV要素）

プロパティ：あなたは四隅を「まろやか」の度合いを設定することができ、オーダーの4値は次のとおりです。トップは、右上、右下、左下隅を残しました。;

border-top-左半径：2EM。
ボーダー -top-右; 2EM：半径
ボーダー -bottom-右半径：2EM。
ボーダー -bottom左半径：2EM。

低下省略、順に左、それは対角と同じであり、左上、右上、右下と略記することができます。

2.アニメーション（アニメーションプロパティ）

注文速記の6つのプロパティの例があります。

ケースのプロパティを使用しました：

アニメーション名：keyframename;（所定のキーフレームの名前でセレクタに結合されます）

アニメーション期間：時間;（アニメーション所定時間）

アニメーションタイミング機能：線形;（終始からアニメーションの速度は同じです）

アニメーションの繰り返しカウント：無限;（無制限の規定は、アニメーションが再生されます）

（及び「へ」「から」発生時における所定の割合の変化、のいずれかのキーワードによって、アニメーション100％、アニメーションの開始時間の終了時間の100％0％0％に相当する）@keyframes

3.ボックスシャドウ（一つ以上のボックスを追加する影）

ボックスシャドウ：H-シャドウV-影のぼかしスプレッドカラーインセット。

（中間体の使用「」影が拡散波の模倣影響するように、大きな拡散明るい色になるように0％から100％使用し、その後、アニメーションの50％の2つの影を作成します）

興味深いことにCSS3実際のケース分析 - （透かしの変動）

おすすめ