Thinker | Make a Thinker!
2019-03-30 | UNLOCK

红绿灯

今天给大家分享一个很简单有趣的红绿灯演示动画，效果图如下：

1

乍一看你可能会觉得纯CSS动画可能做不到，实际上知道了原理还是比较简单的。

首先这里有3盏灯，我们为每一盏灯写了一个animation：

1
2
3
4
5
<div class="traffic-light">
  <div class="light red"></div>
  <div class="light amber"></div>
  <div class="light green"></div>
</div>
1
2
3
4
5
6
7
8
9
.red {
  animation: red 10s linear infinite;
}
.amber {
  animation: amber 10s linear infinite;
}
.green {
  animation: green 10s linear infinite;
}

从上面样式里看出，每盏灯的 animation 持续时间都是10s，那动画不断循环播放的时候，它们之间就会一直保持同步的时间关系。

参照下面的图，从功能出发，很容易理解3盏灯的动画之间的逻辑关系（在这里逻辑关系就是指的它们之间的时间关系）

2

从图中看，一共分5个阶段或者说5个步骤，在每个阶段，不同的灯处于 on 或者 off 的状态。那么我们很明显就是将0% - 100%的时间跨度分成5份,每20%为一个状态，设置不同状态下的参数。

我们从红灯开始看。0%-20% 和 20%-40%，这两个阶段红灯一直亮的，其余的时间都是黑的。那我们可以这么设置：

1
2
3
4
5
6
7
8
9
10
11
@keyframes red {
  0% {
    background: black;
  }
  2%, 40% {
    background-color: red;
  }
  42%, 100% {
    background: black;
  }
}

这里有2%的间隙，是为了让灯看起来有点渐变的效果。可以按照20%``40%去写

同理，黄灯是20%-40%和80%-100%亮，其余时间不亮。这里也加了2%的间隙。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@keyframes amber {
  0%, 20% {
    background: black;
  }
  22%, 40% {
    background: #FF7E00;
  }
  42%, 80% {
    background: black;
  }
  82%, 100% {
    background: #FF7E00;
  }
}

绿灯也很简单，按照图上显示的，来设置它。

1
2
3
4
5
6
7
8
9
10
11
 @keyframes green {
  0%, 40% {
    background: black;
  }
  42%, 80% {
    background: green;
  }
  82%, 100% {
    background: black;
  }
}

最后就大功告成了！当然你可以在这里看到源码。

（完）

css

评论加载中