CSS 變換、過渡、動畫實現案例

以下所有效果的實現方式均為個人見解，如有不對的地方還請一一指出。

目錄

• 方塊“Z”字形運動
• 線段圍繞盒子運動
• 餅圖[動圖, 固定比例，如20%]
• 移動端錄音旋轉小按鈕效果實現[漸變色][初始原型]

方塊“Z”字形運動

要求：5s鐘循環五次；每次的執行時間為2s；每一次執行到底部后反方向執行；最后停留在最后一幀

考察：animation基本屬性值

點擊查看效果

重點代碼說明：

animation: move 2s linear 0s 5 alternate forwards;

參數	含義
move	animation-name 動畫名稱
2s	animation-duration 動畫持續時間, 注意加上單位
linear	animation-timing-function 動畫過渡類型，linear：線性過渡
0s	animation-delay 動畫延遲時間，注意加上單位
5	animation-iteration-count 動畫循環次數, infinite表示無限循環
alternate	animation-direction 動畫是否有反向運動, normal:正向運行; reverse:反向運行; alternate:先正向后反向; alternate-reverse:先反向后正向
forwards	animation-fill-mode 動畫時間之外的狀態, none: 不設置; forwards:設置為結束時的狀態; backwords:設置為開始時的狀態; both:動畫結束或開始的狀態

詳細代碼示例：

dom結構：
  <div class="box">
    <div class="square"></div>
  </div>

  基本樣式：
  .box{
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #fb3;
  }
  .box .square{
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: #58a; 
    animation: move 2s linear 0s 5 alternate forwards; //動畫，這里要注意，時間必須帶上單位
  }

  move動畫定義
  @keyframes move {
    0% {
      transform: translateX(0);
    }
    33% {
      transform: translateX(170px);
    }
    66% {
      transform: translate(0, 170px);
    }
    100% {
      transform: translate(170px, 170px);
    }
  }

線段圍繞盒子運動

要求：線段圍繞盒子運動

考察：clip的用法

這個動畫效果使用animation并不能很好的實現，最終實現方法是使用了 clip 屬性，該屬性用來剪裁對象。動畫實現的原理是用line-box盒子覆蓋住box盒子，line-box無背景只設置邊框，然后使用clip進行剪裁。

clip語法：rect(number number number number)，依據上-右-下-左的順序剪裁，如設置為auto則該邊不剪裁。

點擊查看效果

代碼示例：

dom結構：
  <div class="box">
    <div class="line-box"></div>
  </div>

  基本樣式：
  .box{
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #fb3;
  }
  .box .line-box{
    position: absolute;
    width: 220px; //多出來的20像素為線段到盒子的邊距
    height: 220px;
    left: 0;
    top: 0;
    margin-left: -10px;
    margin-top: -10px;
    border: 2px solid #58a;
    background-color: #58a; 
    box-sizing: border-box;
    animation: move 5s linear infinite;
  }

  move動畫定義
  @keyframes move {
    0% {
      clip: rect(0 220px 2px 0); //依據上-右-下-左的順序剪裁
    }
    25% {
      clip: rect(0 0 220px 2px);
    }
    50% {
      clip: rect(2px 220px 0 0);
    }
    75% {
      clip: rect(0 2px 220px 0);
    }
  }

餅圖

動態餅圖

點擊查看效果

實現方法：

• 首先繪制餅圖基本形狀，使用使用漸變色生成背景 代碼：

.box {
      border-radius: 50%;
      background: linear-gradient(to right, #58a 50%, #fb3 0);
    }

效果：

• 借助偽元素蓋住右側背景，且需要設置 圓角 ( Border詳解 )。
• 更改旋轉中心
• 設置動畫，動畫在旋轉到50%時，需更改偽元素的背景由藍色變成黃色。

代碼示例：

.box:before {
      content: '';
      position: absolute;
      width: 50%;
      height: 100%;
      background-color: #58a;
      right: 0;
      border-radius: 0 100% 100% 0 / 50%;
      transform-origin: left center;
      animation: rotate 6s linear infinite, changeColor 12s step-end infinite;
    }

    @keyframes rotate{
      to{
        transform: rotate(180deg);
      }
    }
    @keyframes changeColor{
      50%{
        background-color: #fb3;
      }
    }

任意大小餅圖

預覽效果

如果知道animation-delay一個比較神奇的用法，那這個效果就很容易實現了。

注意：一個負值的延時值是合法的，與0s的延遲類似，它意味著動畫會立即開始播放，但會自動前進到延時值的絕對值處，就好像動畫在過去已經播放了指定的時間一樣。因此實際效果就是動畫跳過指定時間而從中間開始播放了。

所以我們只需增加偽元素的代碼：

.box:before {
      ...

      animation-delay: -3s;
      animation-play-state: paused;
    }

最終代碼如下：

.box {
      position: relative;
      width: 200px;
      height: 200px;
      margin: 0 auto;
      margin-top: 50px;
      border-radius: 50%;
      background: linear-gradient(to right, #58a 50%, #fb3 0);
      animation-delay: -7.5s;
    }

    .box:before {
      content: '';
      position: absolute;
      width: 50%;
      height: 100%;
      background-color: #58a;
      right: 0;
      border-radius: 0 100% 100% 0 / 50%;
      transform-origin: left center;
      animation: rotate 6s linear infinite, change 12s step-end infinite;
      animation-delay: inherit;
      animation-play-state: paused;
    }

    @keyframes rotate{
      to{
        transform: rotate(180deg);
      }
    }
    @keyframes change{
      50%{
        background-color: #fb3;
      }
    }

移動端錄音旋轉小按鈕效果實現[漸變色]

類似移動端的點擊錄音按鈕的效果，或者是loading的原始效果，[初始原型，有待優化]。

效果圖：

預覽效果

實現方法[個人見解]：左側與右側分別控制，分別旋轉。

dom結構：

<div class="box">
  <div class="item-left"></div>
  <div class="item-right"></div>
  <div class="item-center">60s</div> 
</div>

• item-right, 右側需設置漸變色背景且為半圓形，選擇一個灰色作為漸變色的中間點，這里選擇的是#666，效果圖如下：

代碼：

.box .item-right {
      position: absolute;
      width: 50%;
      height: 100%;
      top: 0;
      right: 0;
      border-radius: 0 100% 100% 0/50%;  /*設置圓角以實現半圓效果*/
      background: linear-gradient(#fff, #666); /*漸變色背景*/
    }

• item-right, 使用偽元素覆蓋住原本的顏色，這里需要注意的是，為了使偽元素更好的覆蓋住item-right的顏色，可使用等比放大或者加陰影等方法，這里選擇的是陰影。

.box .item-right:before{
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      border-radius: inherit;
      background-color: #fff;
      box-shadow: 3px 0 2px 2px #fff;
    }

• 左側同理，但是要注意圓角和顏色需更改：

border-radius: 100% 0 0 100%/50%;
      background: linear-gradient(#000, #666);

• item-center主要是實現中間的小圓，可在這個圓上進行多種操作：

.box .item-center{
      position: absolute;
      width: 190px;
      height: 190px;
      border-radius: 50%;
      background-color: #fff;
      top: 5px;
      left: 5px;
      line-height: 190px;
    }

• 下面開始實現旋轉。
• 右側選中中心在左側中間，而左側的旋轉中心在右側中間，所以需要分別設置 transform-origin 屬性。
• 右側先開始旋轉，第一個動畫設置旋轉動畫，第二個動畫則設置當旋轉結束時，右側偽元素的顏色為透明色，以便左側旋轉。

animation: rotate 30s linear infinite, changeColor 60s step-end infinite;

• 左側旋轉需設置延遲時間，右側旋轉結束方可開始。

animation: rotate 30s 30s linear infinite;

兩個動畫的代碼：

@keyframes rotate {
      to {
        transform: rotate(180deg);
      }
    }
    @keyframes changeColor{
      50%{
        background-color: transparent;
      }
    }

 

來自：https://github.com/junruchen/junruchen.github.io/wiki/CSS-變換-過渡-動畫使用案例