使用纯CSS开发的红绿灯

据说这个是前一段时间某著名互联网公司前端面试题，主要考察的是css3的动画知识。

闲话少说，上代码：

CSS

div{
    background-color:#aabbcc;
    height:200px;
    width:200px;
    margin:5px;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

@keyframes lamp{
    0%{
        background-color: red;
    }
    39%{
        background-color: red;
    }
    40%{
        background-color: green;
    }
    79.9%{
        background-color: green;
    }
    80%{
        background-color: yellow;
    }
    99.9%{
        background-color: yellow;
    }
    100%{
        background-color: red;
    }
}
.lamp{
    border-radius:100%;
    background-color: red; 
    transition: 0s;
    animation:lamp 5s;
    animation-iteration-count:infinite;
}

HTML

<div class="lamp">lamp</div>

查看示例lamp