ホームページ > 記事 > ウェブフロントエンド > [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;}