css : border, position, animation

おしゃれなライオンのように、フロントの4日目の授業内容を復習してCSSをもっと深く勉強して、今までグーグルで私が望んでいた機能を検索するのは何でもないと思います.前回の試合もCSSの授業の後にもう一度やります.

1. border

.c1 {
        border: 1px solid red;
      }

      .c2 {
        border: thick solid green;
      }

      .c3 {
        border: thin dotted blue;
      }

      .c4 {
        border: 3px dashed black;
      }

結果
太さ、種類、色を順に入れます.border-top、border-leftなど各方向に異なる設定も可能です.border-radiusプロパティでは、枠線ごとに曲率を設定できます.border-top-right-radiusなどの枠線は個別に設定できます.

2. position

CSS positionプロパティは、ドキュメントに要素を配置する方法を指定します.top、right、bottom、leftプロパティは、要素の配置の最終位置を決定します.

static

通常のドキュメントフロー(default)に従って要素を配置します.topなどの値は影響を受けません.

relative

要素を通常のドキュメントフローで配置し、それ自体(元の位置)で上、左、下、右にオフセットを適用します.

absolute

レイアウトにスペースを割り当てることなく、通常のドキュメントストリームから要素を削除します.代わりに、最も近い指定した位置の親が相対的に配置されます.

fixed

レイアウトスペースを割り当てずに、通常のドキュメントストリームから要素を削除します.ビューポートの初期輪郭ブロックを基準にして配置します.(Webページナビゲーションはビューが消えるのではなく、フォローを続けます)

sticky

fixedと似ていますが、一定の部分では固定された位置を有し、所定の境界線を通過すると固定された位置を有します.

3.体験動画

divをボタンに設定し、hoverを使用してマウスが上昇したときにdivを移動できるようにする方法を学びました.今日は試聴でしたが、簡単な速成しか聞こえませんでした.

      .one {
        height: 100px;
        width: 200px;
        box-sizing: border-box;
        background-color: chocolate;
        border: solid 5px darkgoldenrod;
        border-radius: 40px;
        text-align: center;
        line-height: 80px;
        color: white;
        font-size: 28px;
        transition: all 1s;
      }
      .one:hover {
        background-color: teal;
        transform: rotate(720deg) scale(1.2);
      }
      .two {
        height: 100px;
        width: 200px;
        box-sizing: border-box;
        background-color: chocolate;
        border: solid 5px darkgoldenrod;
        border-radius: 40px;
        text-align: center;
        line-height: 80px;
        color: white;
        font-size: 28px;
        transition: all 1s;
      }

      .two:hover {
        background-color: teal;
        transform: translate(100px, 200px);
      }
    </style>
    

1. transition: all 1s;

/* Apply to 1 property */
/* property name | duration */
transition: margin-left 4s;

/* property name | duration | delay */
transition: margin-left 4s 1s;

/* property name | duration | timing function | delay */
transition: margin-left 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-left 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

プロパティtransitionで、数秒以内に変化する変化を指定します.

2. transform: rotate(720deg) scale(1.2);

一級のhoverでは、720度の回転とscaleプロパティが使用され、サイズは1.2倍です.

3. transform: translate(100px, 200px);

2段階サスペンションでは、x座標100 px、y座標200 pxを移動させるtranslate属性が使用される.

4.課題：自分なりのキャラクターを作る

最初はキリンになりたかったのですが、ますますネズミに似てきたのでネズミに変えました.border、border-radius、rotate、positionなどの学習内容を持って実習を行いました.