Question

我想创建一个简单的动画，每个＆gt;签署并将其视为赛道或红绿灯。 AKA我想要＆gt;（红色）..（黄色）..＆gt;（绿色），其中......代表.5秒。我能这样做是CSS3吗？如果不是，我怎么能这样做呢。任何帮助赞赏。

<p id="pipes"> >>> </p>

#pipes:hover{

}

Answer 1

即使这个被投票，我认为这将是一个有趣的练习。特别要注意过渡延迟。

<ul class="pipes">
    <li> > </li>
    <li> > </li>
    <li> > </li>
</ul>

.pipes {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.pipes li {
    margin: 0px;
    padding: 0px;
    display: inline-block;
    transition: color .5s ease;
}


.pipes:hover li:nth-of-type(1) {
    color: red;
    transition-delay: .5s;
}

.pipes:hover li:nth-of-type(2) {
    color: yellow;
    transition-delay: 1s;
}

.pipes:hover li:nth-of-type(3) {
    color: green;
    transition-delay: 1.5s;
}

这是小提琴：http://jsfiddle.net/06ywu8nt/

创建一个复制赛车倒计时的CSS动画

1 个答案: