Question

我需要一些帮助来为我的功课编写交通信号灯。我有实际的灯都工作但我不允许在线发布代码。我们正在使用JavaScript，html和CSS，我正在寻找一些代码，它会生成一个灰色的圆形帖子放在下面。如果这不可能，那么矩形柱也可以。还寻找有关如何设计绿色箭头的提示，如图像中的绿色箭头。谢谢：） Green traffic light arrow

Answer 1

这些元素应该让你开始。

.pole{
  position: relative;}

.rounded-post {
  width: 50px;
  height: 200px;
  border-radius: 10px;
  background: #000;
}
.red-light {
  position: absolute;
  top: 30px;
  left: 10px;
  background: red;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  -webkit-animation: animate-red 3s linear 2s infinite alternate;
  -moz-animation: animate-red 3s linear 2s infinite alternate;
  animation: animate-red 3s linear 2s infinite alternate;
}
/*Animation Red*/

@-webkit-keyframes animate-red {
  0% {
    background: red;
  }
  50% {
    background: yellow;
  }
  100% {
    background: green;
  }
}

<div class="pole">
<div class="rounded-post"></div>
<div class="red-light"></div>
  </div>

对于箭头，您可以使用http://fontawesome.io/图标（您可以根据需要对其进行着色）

这个想法是使用position：relative和absolute来定位你的元素。您也可以使用CSS动画来打开/关闭灯光

编码交通信号灯

1 个答案: