[Ellisswエンジニアトラック]4日目CSS移動応答、アニメーション

13292 ワード
エリス 釜山 CSS コードキャンプ テキストリンク

第四節の授業


1週間が終わる前に精神力が低下した日です.
実習内容はアリスの課題で、簡単に代わりにロードすることができます.

n/a.理論

  • CSS
    Transform:Webサイトの特定の領域でオブジェクトの角度と位置を変更する
    rotate:入力角度で回転したり、負の値を入力したりできます
    scale:スケール、数値表示スケール
    斜体しゃたい:立体ワープ角度りったいワープかくど
    translate:選択したオブジェクトの座標を変更する(位置を変更する)
    prefix接頭辞:CSSの最新バージョンのコンテンツ、異なるバージョンのブラウザで実行する必要がある場合は作成
    webkit(Chrome,Safari)、moz(Firefox)、ms(Explorer)、o(Opera)
    Transition:変化するプロセスを示します
    Transition-property:効果を適用するcssプロパティ
    transition-dioduration:効果を表示するのに要する時間
    トランジション-タイミング-関数:効果の速度、線形(一定)
    遷移-遅延:特定の条件で効果を発動する(1 s:1秒後に効果を開始する)
    hover:cssで事前に作成されたクラスで、「マウスのサスペンション時」を条件にします.
    遷移:wid 2 s(duration)線形1 s(delay)-最初に現れた数字はdurationの2番目のdelayです
    アニメーションあにめーしょん:ビジュアルエフェクトを作成するビジュアルエフェクトをさくせいする
    animation-name:作成するアニメーション名を定義する
    animation-duration:アニメーションの実行に要する時間
    アニメーション→タイミング→function:効果の速度
    アニメーション-delay:アニメーションは特定の条件の下で効果を発動します
    アニメーション→反復→カウント:アニメーションの繰り返し
    アニメーション-direction:アニメーションの進行方向
    alternate : from -> to -> from
    normal : from -> to, from -> to
    reverse : to -> from, to -> from
    @keyframes:変更する結果値を入力
    メディアクエリー:パソコン、モバイル、タブレットに対応するWebサイトを作成するための構文
    min-width,max-width:ブラウザ幅の設定
    viewport:メディアクエリーが正常に動作しない可能性があるため、幅とスケール
    • を設定する必要があります.

    実習



    矩形の成形状態

    キーフレームを適用して右折10度程度の画像を完成
    ```
    Document
    ``` 
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        width: 300px;
        height: 300px;
        background-color: red;
        animation: rotation 1500ms linear infinite alternate;
      }
      @keyframes rotation {
        from {
          transform: rotate(-10deg);
        }
        to {
          transform: rotate(10deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
  </body>
</html>

    ブラウザ幅が800 pxより大きい場合

    ブラウザ幅が320 px以上800 px未満の場合
    メディアを使用して変更
    ```
    Document
    ```
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .media {
        width: 500px;
        height: 500px;
        background-color: yellow;
      }
      @media (min-width: 320px) and (max-width: 800px) {
        .media {
          width: 100px;
          height: 100px;
          background-color: blue;
        }
      }
    </style>
  </head>
  <body>
    <div class="media"></div>
  </body>
</html>
    JUnit注記ベースのテスト(Spring 3.1以降)
    [python]白駿20061モノラル2チャネル