HTML5-CSS3總結學習(二)

1、rotate

2d旋轉指的是讓元素在2維平面內順時針旋轉或者逆時針旋轉

使用步驟:css

  1. 給元素添加轉換屬性 transform
  2. 屬性值爲 rotate(角度)transform:rotate(30deg) 順時針方向旋轉30度
div{
      transform: rotate(0deg);
}

三角

div {
    position: relative;
    width: 249px;
    height: 35px;
    border: 1px solid #000;
}

div::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 15px;
    width: 10px;
    height: 10px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    transform: rotate(45deg);
    transition: all 0.2s;
}
/* 鼠標通過div  裏面的三角旋轉 */

div:hover::after {
    transform: rotate(225deg);
}

2、設置元素旋轉中心點(transform-origin)

  1. transform-origin 基礎語法動畫

    transform-origin: x y;
  2. 重要知識點spa

    • 注意後面的參數 x 和 y 用空格隔開
    • x y 默認旋轉的中心點是元素的中心 (50% 50%),等價於 center center
    • 還能夠給 x y 設置像素或者方位名詞(topbottomleftrightcenter)

旋轉中心案例

div {
    width: 200px;
    height: 200px;
    background-color: pink;
    margin: 100px auto;
    transition: all 1s;
    /* 1.能夠跟方位名詞 */
    /* transform-origin: left bottom; */
    /* 2. 默認的是 50%  50%  等價於 center  center */
    /* 3. 能夠是px 像素 */
    transform-origin: 50px 50px;
}

div:hover {
    transform: rotate(360deg);
}

3、2D 轉換之 scale

  1. scale 的做用code

    • 用來控制元素的放大與縮小
  2. 語法orm

    transform: scale(x, y)
  3. 知識要點animation

    • 注意,x 與 y 之間使用逗號進行分隔
    • transform: scale(1, 1): 寬高都放大一倍,至關於沒有放大
    • transform: scale(2, 2): 寬和高都放大了二倍
    • transform: scale(2): 若是隻寫了一個參數,第二個參數就和第一個參數一致
    • transform:scale(0.5, 0.5): 縮小
    • scale 最大的優點:能夠設置轉換中心點縮放,默認以中心點縮放,並且不影響其餘盒子
  4. 代碼演示it

    div:hover {
           /* 注意,數字是倍數的含義,因此不須要加單位 */
           /* transform: scale(2, 2) */
       
           /* 實現等比縮放,同時修改寬與高 */
           /* transform: scale(2) */
       
           /* 小於 1 就等於縮放*/
           transform: scale(0.5, 0.5)
       }

4、 2D 轉換綜合寫法以及順序問題

  1. 知識要點io

    • 同時使用多個轉換,其格式爲 transform: translate() rotate() scale()
    • 順序會影響到轉換的效果(先旋轉會改變座標軸方向)
    • 但咱們同時有位置或者其餘屬性的時候,要將位移放到最前面
  2. 代碼演示function

    div:hover {
     transform: translate(200px, 0) rotate(360deg) scale(1.2)
    }

5、 動畫(animation)

  1. 什麼是動畫form

    • 動畫是 CSS3 中最具顛覆性的特徵之一,可經過設置多個節點來精確的控制一個或者一組動畫,從而實現複雜的動畫效果
  2. 動畫的基本使用

    • 先定義動畫
    • 在調用定義好的動畫
  3. 語法格式(定義動畫)

    @keyframes 動畫名稱 {
        0% {
            width: 100px;
        }
        100% {
            width: 200px
        }
    }
  1. 語法格式(使用動畫)

    div {
    /* 調用動畫 */
    animation-name: 動畫名稱;
     /* 持續時間 */
     animation-duration: 持續時間;
    }
  1. 動畫序列

    • 0% 是動畫的開始,100 % 是動畫的完成,這樣的規則就是動畫序列
    • 在 @keyframs 中規定某項 CSS 樣式,就由建立當前樣式逐漸改成新樣式的動畫效果
    • 動畫是使元素從一個樣式逐漸變化爲另外一個樣式的效果,能夠改變任意多的樣式任意多的次數
    • 用百分比來規定變化發生的時間,或用 fromto,等同於 0% 和 100%
  2. 代碼演示

    <style>
        div {
          width: 100px;
          height: 100px;
          background-color: aquamarine;
          animation-name: move;
          animation-duration: 0.5s;
        }
    
        @keyframes move{
          0% {
            transform: translate(0px)
          }
          100% {
            transform: translate(500px, 0)
          }
        }
      </style>

6、動畫常見屬性

  1. 常見的屬性

  1. 代碼演示

    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;
    }

7、 動畫簡寫方式

  1. 動畫簡寫方式

    /* animation: 動畫名稱 持續時間 運動曲線 什麼時候開始 播放次數 是否反方向 起始與結束狀態 */
    animation: name duration timing-function delay iteration-count direction fill-mode
  2. 知識要點

    • 簡寫屬性裏面不包含 animation-paly-state
    • 暫停動畫 animation-paly-state: paused; 常常和鼠標通過等其餘配合使用
    • 要想動畫走回來,而不是直接調回來:animation-direction: alternate
    • 盒子動畫結束後,停在結束位置:animation-fill-mode: forwards
  3. 代碼演示

    animation: move 2s linear 1s infinite alternate forwards;

8、速度曲線細節

  1. 速度曲線細節

    • animation-timing-function: 規定動畫的速度曲線,默認是ease

  1. 代碼演示

    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;
      }
    }
相關文章
相關標籤/搜索