HTML5-CSS3總結學習(二)

1、rotate

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

使用步驟：

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. 重要知識點

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

旋轉中心案例

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 的做用

   • 用來控制元素的放大與縮小

2. 語法

   transform: scale(x, y)

3. 知識要點

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

4. 代碼演示

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

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

1. 知識要點

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

2. 代碼演示

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

5、 動畫(animation)

1. 什麼是動畫

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

2. 動畫的基本使用

   • 先定義動畫
   • 在調用定義好的動畫

3. 語法格式(定義動畫)

   @keyframes 動畫名稱 {
       0% {
           width: 100px;
       }
       100% {
           width: 200px
       }
   }

1. 語法格式(使用動畫)

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

1. 動畫序列

   • 0% 是動畫的開始，100 % 是動畫的完成，這樣的規則就是動畫序列
   • 在 @keyframs 中規定某項 CSS 樣式，就由建立當前樣式逐漸改成新樣式的動畫效果
   • 動畫是使元素從一個樣式逐漸變化爲另外一個樣式的效果，能夠改變任意多的樣式任意多的次數
   • 用百分比來規定變化發生的時間，或用 from 和 to，等同於 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;
     }
   }