編碼交通燈郵編

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/圖標的箭頭（你可以將它們上色不過你想要的）

的想法是使用的位置是：相對和絕對定位的元素。你也可以使用css動畫來開啓/關閉燈光