紅綠燈?——CSS 動畫

ThinkerZhang發表於2019-03-01
CSS動畫

今天給大家分享一個很簡單有趣的紅綠燈演示動畫，效果圖如下：

紅綠燈?——CSS 動畫

乍一看你可能會覺得純CSS動畫可能做不到，實際上知道了原理還是比較簡單的。

首先這裡有3盞燈，我們為每一盞燈寫了一個animation：

<div class="traffic-light">
  <div class="light red"></div>
  <div class="light amber"></div>
  <div class="light green"></div>
</div>
複製程式碼
.red {
  animation: red 10s linear infinite;
}
.amber {
  animation: amber 10s linear infinite;
}
.green {
  animation: green 10s linear infinite;
}
複製程式碼

從上面樣式裡看出，每盞燈的 animation 持續時間都是10s，那動畫不斷迴圈播放的時候，它們之間就會一直保持同步的時間關係。

參照下面的圖，從功能出發，很容易理解3盞燈的動畫之間的邏輯關係（在這裡邏輯關係就是指的它們之間的時間關係）

紅綠燈?——CSS 動畫

從圖中看，一共分5個階段或者說5個步驟，在每個階段，不同的燈處於 on 或者 off 的狀態。那麼我們很明顯就是將0% - 100%的時間跨度分成5份,每20%為一個狀態，設定不同狀態下的引數。

我們從紅燈開始看。0%-20% 和 20%-40%，這兩個階段紅燈一直亮的，其餘的時間都是黑的。那我們可以這麼設定：

@keyframes red {
  0% {
    background: black;
  }
  2%, 40% {
    background-color: red;
  }
  42%, 100% {
    background: black;
  }
}
複製程式碼

這裡有2%的間隙，是為了讓燈看起來有點漸變的效果。可以按照20%``40%去寫

同理，黃燈是20%-40%和80%-100%亮，其餘時間不亮。這裡也加了2%的間隙。

@keyframes amber {
  0%, 20% {
    background: black;
  }
  22%, 40% {
    background: #FF7E00;
  }
  42%, 80% {
    background: black;
  }
  82%, 100% {
    background: #FF7E00;
  }
}
複製程式碼

綠燈也很簡單，按照圖上顯示的，來設定它。

 @keyframes green {
  0%, 40% {
    background: black;
  }
  42%, 80% {
    background: green;
  }
  82%, 100% {
    background: black;
  }
}
複製程式碼

最後就大功告成了！當然你可以在這裡看到原始碼。

（完）

本文作者 Thinker

本文如有錯誤之處，請留言，我會及時更正

覺得對您有幫助的話就點個贊或收藏吧！

歡迎轉載或分享，轉載時請註明出處

閱讀原文

相關文章