CSS 3の2次元、3次元、グラデーション処理の簡単なまとめと効果（アニメーションは載せにくい）-htmlチュートリアル-php.cn

CSS 3の2次元、3次元、グラデーション処理の簡単なまとめと効果（アニメーションは載せにくい）

WBOY

リリース： 2016-08-08 08:49:55

オリジナル

1423 人が閲覧しました

1. 移動せず、領域内で変化します（本質的に画像を生成します）

/*グラデーション

1 長方形のグラデーションについては、まず長方形の幅と高さを定義します (見やすくするために境界線を追加することをお勧めします)

「」

background-imageの使用: -webkit-linear-gradient(右上、赤50%、青50%);

2 大中小の円の色が変わりますまず大きな円を作ります。

圆/*内側から外側に向かって順番に色を塗っていきます*/

GBackground-Image: -webkit-Radial-Gradient (50%50%、黄色 20%、赤 50%、ピンク 55%、青 100%

);

/*長方形内で円形のグラデーションを使用することもできます*/ 3 反省

.testb{

背景画像: url(img/5.jpg);

高さ: 200px;

/*方向間隔勾配*/

/*上、下*/

/*1 リフレクションはドキュメントフローのスペースを占有しません

レベルはドキュメントフローよりも高いです。

2 反射はラベル (幅と高さ)*/

に基づきます

-webkit-box-reflect: 20px 以上 -webkit-linear-gradient(top,rgba(0,0,0,0) 0% ,rgba(0,0,0,0.5) 100%);

}

宽 4つの枠線は比較的広く、4つの枠の色が異なります。出会いの隅には異なる色の三角形が形成されます。

border-radius: 50px 0 50px 50px; 丸い角をカットするために使用されます

製造

.textG{

幅: 200px;

高さ: 100px;

境界半径: 100px 100px 100px 100px/50px 50px 50px 50px;

}

2. 2次元平面内の移動

.test{

transform:rotate(0deg) Translation(0px,0px)scale(1);(回転変換スケール)

.test:hover{transform:rotate(720deg) Translation(500px,300px)scale(2);}

分 3 つのエフェクトは個別に使用することもでき、異なる連続エフェクトの効果は異なります。

3. 3次元空間でのアニメーション効果

使用する签标。父タグ {Transform-Style: Preserve-3D;}/*その父タグで 3D 効果を開きます*/

St.test {

Transform: 回転 (0Deg) 移動 (0px, 0px) スケール (1);

.test:hover{transform:rotate(720deg) Translation(500px,300px)scale(2);}(位置変更)

D /*3D 効果に Z 軸効果を設定できます* /

4 つのフレームアニメーション R @Keyframes アニメーション名 (自撮り) {

0%(from){変換:…}

100%(to){変換:…}

}

.test:hover{

/*アニメーション効果はトランジションと同じ方法で割り当てられます*/

アニメーション:movet 1s easy; /*アニメーション実行無限ループのワード数*/

アニメーション反復数: 無限;

}