ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS3 の位置設定の問題 anime_html/css_WEB-ITnose
水平方向のセンタリングを実装するさまざまな方法:
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 */}