css - 像在 Windows 7 中一样，让一些渐变在进度条中无休止地移动

Question

我想知道是否可以仅使用 CSS3 功能在 div 内从左到右无休止地进行渐变移动？不需要支持所有浏览器，我只是想试验一下。示例是蓝色进度条顶部的闪亮效果。一个例子值得赞赏。

Answer 1

使用此 CSS，您可以让渐变无休止地移动（基于Michael 评论中的链接）：

.bar {
    background: -webkit-linear-gradient(left , #0193CD 30%, #66D4E5 80%, #0193CD 100%) repeat;
    -webkit-background-size: 50% 100%;
    -webkit-animation-name: moving-gradient;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes moving-gradient {
    0% {
        background-position: left bottom;
    }

    100% {
        background-position: right bottom;
    }
}​

演示：http: //jsfiddle.net/jhogervorst/X78qN/2/

这仅适用于基于 WebKit 的浏览器（例如，Safari 和 Chrome）。要使其在其他浏览器中也能正常工作，请参阅Michael 的链接并复制更多 CSS。

编辑：我必须使它完美。在 CSS3 中查看几乎完美的 Windows 进度条的新演示 :)