CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

widthプロパティとheightプロパティの両方にCSS遷移効果を追加します

要素の幅と高さのプロパティに遷移効果を追加するには、次のコードを実行してみてください

例

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 150px;
            height: 150px;
            background: blue;
            transition: width 3s;
         }
         div:hover {
            width: 250px;
            height: 250px;
         }
      </style>
   </head>
   <body>
      <h1>Heading One</h1>
      <p>Hover over the below box to change its width and height.</p>
      <div></div>
   </body>
</html>

  1. CSSのmarginプロパティを使用した中央揃え

    CSSのmarginプロパティを使用して、ブロックレベルの要素を水平方向に中央揃えできますが、その要素のCSSwidthプロパティを設定する必要があります。 CSSマージンプロパティを使用して要素を中央に配置する例を見てみましょう- 例 <!DOCTYPE html> <html> <head> <title>Center Alignment using CSS Margin</title> <style> #yinyangSymbol {    width: 100px;    

  2. CSSの要素の幅と高さ

    CSSのheightプロパティとwidthプロパティは、要素の高さと幅をそれぞれ指定するために使用されます。 max-height、max-width、min-height、およびmin-widthプロパティを使用して、これらのプロパティの最大値と最小値を設定することもできます。 構文 CSSの高さとCSSの幅のプロパティの構文は次のとおりです- Selector {    height: /*value*/    width: /*value*/ } 要素の実際の幅と高さは次のように計算されます- ボックスサイズ 計算 全幅 幅+パディン