リップルアニメーション
関連するプロパティCSSアニメーションのプロパティと背景に、このアプリケーションで。
：このコード行は、次のコードで書かれていていると言って価値があるフィルタ：アルファ（不透明度= 0〜100） ブラウザの互換性の問題に与えられ、。
IEは、プライベートプロパティフィルタを使用：アルファ（不透明度）、MOZファミリー-moz-不透明プライベートプロパティを使用して、標準プロパティは不透明（CSS 3、MOZファミリー支持部CSS3）です。透明度の値の後に、または）、実際には、100よりも大きい割合を0未満の値を使用して、小数のパーセンテージ（アルファ（不透明度））を使用します。
円の左上隅に移動マップで、あなたは私のブログのアドレスへのリンクをクリックすることができます。
コードを以下に示します。
<！DOCTYPE HTML >
< HTML >
< ヘッド>
< メタ文字コード= "UTF-8" >
< タイトル> CSS波纹动画</ タイトル>
< スタイル>
体{
背景：＃000 ;
}
■は{
幅：100％ 。
高さ：600PX 。
背景：スカイブルー。
}
.vr {
表示：ブロック。
幅：71px ;
高さ：71px ;
境界半径：50％ 。
位置：絶対;
左：18px ;
トップ：22px ;
背景：98FB98 URL（../ imges / new_img / vr.png）＃ノー・リピート左上。
背景サイズ：100％100％ 。
z屈折率：99 。
}
.vr_wrap {
背景：#FFF 。
不透明度：0.7 ;
フィルタ：アルファ（不透明度= 70） 。
幅：71px ;
高さ：71px ;
境界半径：50％ 。
位置：絶対;
左：18px ;
上：22px ;
ボックスシャドウ：0PX 0PXは50px 10pxの#fbfbfb 。
アニメーション：mymove 2S無限。
/ * アニメーション方向：代替。* /
境界半径：50％ 。
}
.vr_wrap2 {
背景：#FFF 。
不透明度：0.9 ;
フィルタ：アルファ（不透明度= 90） 。
境界半径：50％ 。
幅：71px ;
高さ：71px ;
境界半径：50％ 。
位置：絶対;
左：18px ;
トップ：22px ;
ボックスシャドウ：0PX 0PXは50px 10pxの#fbfbfb 。
アニメーション：mymove1 2S無限。
/ * アニメーション方向：代替。* /
}
@keyframes mymove {
0％{
ボックスシャドウ：0PX 0PX 0PX 2ピクセル#FFF 。
高さ：71px ;
幅：71px ;
}
100％{
ボックスシャドウ：0PX 0PX 0PX 20ピクセル#FFF 。
高さ：72px ;
幅：72px ;
}
100％{
不透明度：0 。
フィルタ：アルファ（不透明度= 0） 。
}
}は
mymove1 @keyframes {
0％を{
ボックスシャドウ：0PX 0PX 0PX 2ピクセル#FFF 。
高さ：71px ;
幅：71px ;
}
50％{
ボックスシャドウ：0PX 0PX 0PX 20ピクセル#FFF 。
高さ：72px ;
幅：72px ;
不透明度：0 ;
}
100％{
不透明度：0 。
フィルタ：アルファ（不透明度= 0） 。
}
}
</ スタイル>
</ ヘッド>
< 身体>
< divのクラス= "ボックス" >
< クラス= "VR" のhref = "https://www.cnblogs.com/shihaiying/" > </ A > < div クラス= "vr_wrap" > </ DIV >
div クラス= "vr_wrap2" > </ DIV >
</ DIV >
</ ボディ>
</ HTML >
レンダリング：
これらはリップルアニメーションCSSコードおよびレンダリングされています。具体的な結果は、コードビューをコピーすることができます見てみたい、もちろん、あなたも美しい背景色と、自分へのリンクを設定することができます。
ホープことができます！！！