HTML5+CSS3

19466 ワード
webフロントエンド
HTML 5翌日
一、rotate
2 d回転とは、要素を2次元平面内で時計回りまたは反時計回りに回転させることです.
手順:
  • 要素に変換属性を追加transform
  • 属性値はrotate( )例えばtransform:rotate(30deg)時計回りに30度回転
    • div{
      transform: rotate(0deg);
}

    二、三角
  • コードプレゼンテーション
    • 二、要素回転中心点(transform-origin)を設定する
  • transform-origin基礎文法
    • transform-origin: x y;
  • 重要知識点
  • 後のパラメータxとyがスペースで区切られていることに注意
  • x yデフォルト回転の中心点は要素の中心(50%)であり、等価centercenter
  • x yに画素または方位名詞を設定することも可能(top・bottom・left・right・・center・)
    • 三、回転中心ケース
  • コードプレゼンテーション
    • 四、2D変換之scale
  • scaleの役割
  • 要素の拡大・縮小を制御するためのもの
  • 文法
    transform: scale(x, y)
  • 知識のポイント
  • 注意xとyの間をカンマで区切る
  • transform: scale(1, 1):幅も高さも2倍に拡大し、拡大していないことに相当する
  • transform: scale(2, 2):幅も高さも2倍に拡大
  • transform: scale(2):パラメータが1つしか書かれていない場合、2番目のパラメータは1番目のパラメータと一致する
  • transform:scale(0.5, 0.5):縮小
  • scale最大のメリット:変換中心点の拡大・縮小を設定でき、デフォルトでは中心点で拡大・他のボックスに影響しない
  • コードプレゼンテーション
       div:hover {
	   /*   ，        ，         */
	   /* transform: scale(2, 2) */
   
	   /*       ，        */
	   /* transform: scale(2) */
   
	   /*    1      */
	   transform: scale(0.5, 0.5)
   }
    • 五、画像拡大事例
  • コードプレゼンテーション
    • 六、ページングボタンのケース
  • コードプレゼンテーション
    • 七、2D変換総合書き方及び順序問題
  • 知識ポイント
  • 複数の変換を同時に使用し、その形式はtransform: translate() rotate() scale()
  • 順番が切り替えの効果に影響する(先回し移籍で座標軸方向を変える)
  • 位置や他の属性がある場合は、シフトを一番前にする
  • コードプレゼンテーション
    • div:hover {
  transform: translate(200px, 0) rotate(360deg) scale(1.2)
}

    八、アニメーション(animation)
  • アニメとは
  • アニメーションはCSS3の中で最も転覆的な特徴の一つであり、複数のノードを設定することで1つまたは複数のアニメーションを正確に制御することができ、複雑なアニメーション効果を実現することができる
  • アニメの基本使用
  • 先定義動画
  • 定義されたアニメーションを呼び出す
  • 文法形式(定義動画)
    @keyframes      {
    0% {
        width: 100px;
    }
    100% {
        width: 200px
    }
}
  • 文法形式(動画使用)
    • div {
	/*      */
    animation-name:     ;
 	/*      */
 	animation-duration:     ；
}
  • アニメーションシーケンス
  • 0%がアニメーションの開始、100%がアニメーションの完了というルールがアニメーションシーケンス
  • @keyframsでCSSスタイルを指定し、現在のスタイルを作成して徐々に新しいスタイルに変更するアニメーション効果
  • アニメーションは、1つのスタイルから別のスタイルに要素を徐々に変化させる効果で、任意に多いスタイルを任意に多く変えることができる回数
  • 変化の発生時間をパーセンテージで規定するか、fromとtoで0%と100%に等しい
  • コードプレゼンテーション
    • 九、アニメーションシーケンス
  • コードプレゼンテーション
    • 十、アニメーションの一般的な属性
  • 一般的な属性
  • コードプレゼンテーション
    div {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  /*      */
  animation-name: move;
  /*        */
  animation-duration: 2s;
  /*        */
  animation-timing-function: ease-in-out;
  /*            */
  animation-delay: 2s;
  /*          infinite:      */
  animation-iteration-count: infinite;
  /*        */
  animation-direction: alternate;
  /*           */
  animation-fill-mode: forwards;
}

div:hover {
  /*              */
  animation-play-state: paused;
}
    • 十一、アニメの書き方
  • 動画の書き方
    • /* animation:                                        */
animation: name duration timing-function delay iteration-count direction fill-mode
  • 知識ポイント
  • 略記属性には含まれていないanimation-paly-state
  • 動画を一時停止animation-paly-state: paused;マウスとの経過など他の組み合わせでよく使われる
  • アニメが戻ってくるようにするには、直接戻ってくるのではなく、:animation-direction: alternate
  • ボックス動画終了後、終了位置:animation-fill-mode: forwards
  • コードプレゼンテーション
    animation: move 2s linear 1s infinite alternate forwards;
    • 十二、速度曲線の詳細
  • 速度曲線詳細
  • animation-timing-function:アニメーションの速度曲線を規定し、デフォルトはease

    • ​
  • コードプレゼンテーション
    div {
  width: 0px;
  height: 50px;
  line-height: 50px;
  white-space: nowrap;
  overflow: hidden;
  background-color: aquamarine;
  animation: move 4s steps(24) forwards;
}

@keyframes move {
  0% {
    width: 0px;
  }

  100% {
    width: 480px;
  }
}
    • 十三、走る熊大
  • コードプレゼンテーション
    • 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        body {
            background-color: #ccc;
        }      
        div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            /*             ，       */
            animation: bear .4s steps(8) infinite, move 3s forwards;
        }
        
        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
        
        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                /* margin-left: -100px; */
                transform: translateX(-50%);
            }
        }
    style>
head>

<body>
    <div>div>
body>

html>
    パスワード正規表現の統合
    LocalStorageとSessionStorage、クッキーの比較とJSONオブジェクトタイプへの変換