让一些渐变在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进度条的新演示:)