[css] css3 の新機能により、memory_html/css_WEB-ITnose が強化されました

css3 は、セレクター、ボックス モデル、背景と境界線、テキスト効果、2D/3D 変換、アニメーション、複数列レイアウト、およびユーザー インターフェイスの小さなモジュールに分割されています

2D変換

要素の 2D 変換を設定するには、transform: 属性を使用します。互換性のあるブラウザの場合は、接頭辞 -webkit- -moz-

を追加します。

要素を特定の角度で回転するには、rotate() メソッドを使用します。角度

例:transform :rotate(30deg); deg は角度の単位です

translate() メソッドを使用して要素をシフトします。パラメータ: x 軸、y 軸

例:transform: translation(10px,10px);

scale() メソッドは、要素の比率を変更します。パラメーター: x 軸の比率、y 軸の比率

例:transform:scale(2,2);

要素をストレッチするには skew() メソッドを使用します。パラメータ: x 軸の角度、y 軸の角度

例:transform:skew(20deg,20deg);

matrix() メソッドを使用し、複数の変換を行います組み合わせ、パラメータ: 行列、理解できません

3D変換

多くのブラウザでは、要素の回転にサポートされていません。

トランジション効果

要素のトランジション: 属性を使用します。互換性のあるブラウザの場合は、プレフィックス -webkit- -moz- を追加してください。したがって、:hover 中に要素のスタイルを変更することで効果を確認できます。

パラメータ: css スタイルの期間、transition: 属性を使用します

例:transition:width 2s;

複数の変更を区切るにはカンマを使用しますパラメータ、トランジション: スタイル時間、スタイル 2 時間 2、。 。 。

Animation

アニメーション @keyframes ルール、@keyframes ルール名を作成する {}

コンテンツ内で、パーセンテージを使用してアニメーションの進行状況を分割し、スタイルを変更します

0%{ 一部のスタイル }

25%{ 一部のスタイル }

50%{ 一部のスタイル }

75%{ 一部のスタイル }

100%{ 一部のスタイル }

アニメーションを使用: 属性を使用してアニメーション ルールを設定し、パラメータ: ルール名、実行時間、速度カーブ、遅延時間、再生時間、ループ再生

例: アニメーション:ビッチ 2s イーズ 0s 無限;

@keyframes bitch{    0%{        opacity: 0;    }    50%{        opacity: 1;    }    100%{        opacity: 0;    }}#test{    width: 100px;    height: 100px;    background: red;    animation:bitch 2s ease 0s infinite;}