CSS トランジションを使用して Div を中心から展開する方法

CSS を使用して上と左だけではなく中央から Div を展開する方法

div を展開する望ましい効果を達成することができますCSS を使用して中心からアクセスできますが、正確なアプローチは目的のコンテキストとインタラクションによって異なることに注意することが重要です。使用できるオプションの 1 つを次に示します。

マージンのトランジション プロパティを利用することで、div を中心から拡大する効果を作成できます。最初に div の周囲に大きなマージンを設定し、ユーザーがその上にマウスを移動したときに、div が展開される幅と高さの半分だけマージンを減らします。

たとえば、初期幅の div があるとします。高さは 10 ピクセルで、ホバーすると 100 ピクセルに拡大します。次の CSS を設定します:

<code class="css">#square {
    width: 10px;
    height: 10px;
    margin: 100px;
    -webkit-transition: width 1s, height 1s, margin 1s;
    -moz-transition: width 1s, height 1s, margin 1s;
    -ms-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    width: 100px;
    height: 100px;
    margin: 55px;
}</code>

これにより、div を中心から拡大する効果が作成されます。 div をフローティングすると、トランジション中にわずかな「揺れ」が生じる可能性があるため、フローティングせずに所定の位置に維持することをお勧めします。

以上がCSS トランジションを使用して Div を中心から展開する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。