ホームページ  >  記事  >  ウェブフロントエンド  >  css3.0 新しい属性 learning_html/css_WEB-ITnose

css3.0 新しい属性 learning_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:41:181105ブラウズ

変換 変換 (スタイル で定義する必要があります): 変位、スケーリング、回転、ベベル (歪み)

属性は次のとおりです:

1. ディスプレイスメント: translate

(0px

, 0px ) 属性値: (0px, 0px

) 要素が x 軸、y 軸の座標変位、 2 番目の値は指定する必要はありません。指定しない場合は、デフォルトの 0 になります。 2、スケール: scale (.5, .5)

属性値: (.5, .5) の後にカンマで区切られた 2 つの小数点 (パーセンテージ) が括弧内に続き、要素の中心点は次のとおりです。スケーリングの基点として使用されます。

x 軸と y 軸の座標に沿って要素を比例的にスケーリングします。そうでない場合は、デフォルトで 0 が設定されます。

。转旋 3、回転:

Rotate

(5deg

)

または

Rotate (1rad) Rad: 円弧、 Deg: 度。 要素の左上隅を基点として、値を押して時計回りに回転します。 原点のリセット: transform-origin:0 0;

Origin

の後に2つの

numberが続くと、

要素はx軸とy軸に沿った回転原点をリセットします。

4、ベベル(歪み): skew(1rad,1rad)

属性値: (1rad,1rad)

括弧内には2つのラジアン値があります

raに歪みの程度を決定します。その値はそれぞれ x 軸と y 軸に対応します。2 番目の値を指定する必要はありません。指定しない場合は、デフォルトで 0 になります。

( はスタイルで定義する必要があります)

過剰 --- キーワード:

transition 4 つの値に従います: Transitation: [Transition-ProPERTY] || [移行期間]||

[transition-timing-function]||[transition-delivery];

つまり:

transition: all 4s Linear 2s;

それらの値の意味は次のとおりです:

1. プロパティ: 遷移に関係するオブジェクトのプロパティを取得または設定します。値の範囲は次のとおりです:

All (デフォルト値): 遷移できるすべての CSS プロパティ。

None: 過剰な CSS 属性を指定しません。

2、duration: オブジェクトの遷移の継続時間を取得または設定します。値の範囲は次のとおりです:

time: オブジェクトの遷移の継続時間を指定します。

3. タイミング関数: オブジェクトのトランジション アニメーション タイプを取得または設定します。その値の範囲は次のとおりです (リスト 5):

linear: 線形トランジション。

簡単: 滑らかに仕上げます。

イーズイン: 低速から高速まで。

イーズアウト: 速いものから遅いものまで。

イーズインアウト: 低速から高速、そして再び低速へ。

4、遅延: オブジェクトの遅延が過剰になる時間を取得または設定します。値の範囲は次のとおりです。

time: オブジェクトが過剰になる時間を指定します。

以下は過剰なコード実装の例です:

<体>

lt;/div>

平滑过渡

由ゆっくり到快

由快到ゆっくり

由快到遅< ;/div>

アニメーション画 关键字:animation 属性の有:

1、名前:検索または設定オブジェクトに適用されたアニメーション名、取得範囲の有:

none:いかなるアニメーション名も参照しません。 アニメーション名が @keyframes によって提供されるため、@keyframes と併用する必要があります

2、期間: アニメーションの検索または設定の継続時間。

時間: 時間。

3、-タイミング-機能:検索または設置アニメの

4、遅延:アニメーションの検索または設定の遅延。

5 count: オブジェクトアニメーションの検索または設定の循環回数。

無限: 無制限循環。

番号: アニメーション画の特定の循環回数。

6 、方向: 循環中のアニメーション画の検索または配置が逆方向に移動するかどうか。 Normal: 通常の方向。

Alternate: 通常と逆方向。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。