CSS3 の位置設定の問題 anime_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS3 の位置設定の問題 anime_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:44:47

オリジナル

1575 人が閲覧しました

水平方向のセンタリングを実装するさまざまな方法:

 position: absolute; margin:0 auto; left:0; right:0;

ログイン後にコピー

position: absolute; left:50%; -webkit-transform:translateX(-50%);

ログイン後にコピー

垂直方向のセンタリングを実装するいくつかの方法:

 position: absolute; margin:auto 0; top:0; bottom:0;

ログイン後にコピー

position: absolute;top:50%;-webkit-transform:translateY(-50%);

ログイン後にコピー

中央を実装するいくつかの方法ing:

れー

透明度制御 (グラデーション効果)

position: absolute;margin:auto;top:0;bottom:0;left:0;right:0;

ログイン後にコピー

遅延効果の制御:

@keyframes を使用してアニメーションを作成する場合は、必ずセレクターにバインドしてください。そうしないと、アニメーションは発生しません。さらに、アニメーションの名前と期間を定義する必要があります。期間を省略した場合、デフォルト値は 0 であるため、アニメーションは許可されません。複数の遅延アニメーションで構成される全体的なアニメーションの場合、小さなアニメーションごとに異なる遅延を設定して、それらが次々に表示されるようにすることができます。オブジェクトの異なる時間に異なる状態を設定する場合は、パーセントを使用して変更を指定するのが最善です。時間、またはキーワード「from」と「to」は、それぞれ 0% と 100% に相当します (アニメーションの開始と終了)。

コード例は次のとおりです。

  position: absolute;  top:50%;  left:50%;  -webkit-transform:translateX(-50%) translateY(-50%);

ログイン後にコピー

@-webkit-keyframes opacity_kf {            0% {                opacity: 0;            }            100% {                opacity: 1;            }         }

ログイン後にコピー

div{animation: myfirst 5s;-moz-animation: myfirst 5s;    /* Firefox */-webkit-animation: myfirst 5s;    /* Safari 和 Chrome */-o-animation: myfirst 5s;    /* Opera */}

ログイン後にコピー