使用css3创建颜色变化的生长线

Question

我正在创建一个新网站。我有几个标题（h1，h2，h3，h4）。我想在标题下划线。这些下划线应该具有增长和变色效果，如：http://antonioleiva.com/swiperefreshlayout/中所示。

有没有办法在css / jquery / html中实现这些效果。

我不知道svg或flash动画。

Answer 1

哈克在这里是'Ye Ol'JS Fiddle。见证css的力量。这个很简单，不确定你最终的结果是什么，但希望这会让你朝着正确的方向前进。

.header {
    height: 80px;
    width: 100%;
    background: #333;
    position: relative;
    overflow: hidden;
}
.header > div {
    position: absolute;
    bottom: 0;
}
.redLine {
    height: 10px;
    animation: moveLine 3s infinite;
    margin: 0 auto;
    background: red;
}
.blueLine {
    height: 10px;
    animation: moveLine 3s infinite;
    margin: 0 auto;
    background: blue;
    animation-delay: 1s;
}
.greenLine {
    height: 10px;
    animation: moveLine 3s infinite;
    margin: 0 auto;
    background: green;
    animation-delay: 2s;
}

@keyframes moveLine {
    0% {
        width: 0%;
        z-index: 3;
    }
    38% {
        z-index: 3;
    }
    39% {
        z-index: 2;
    }
    70% {
        z-index: 2;
    }
    71% {
        z-index: 1;
    }
    100% {
        z-index: 1;
        width: 110%;
    }
}