在进度条中像在Windows 7中一样渐进移动 [英] Make some gradient move endlessly in a progress bar like in Windows 7

问题描述

我想知道是否可以使用CSS3的特性，从左到右逐渐移动div内部的渐变？没有必要支持所有的浏览器，我只是想实验。
例子是在蓝色进度条的顶部闪亮效果。

I wonder if it's possible to make a gradient move inside a div from left to right endlessly using only CSS3 features? There is no need to support all browsers, I just want to experiment. The example is that shiny effect on top of the blue progress bar. An example is appreciated.

推荐答案

使用这个CSS，你可以让渐变移动无限（基于链接在Michael的评论）：

Using this CSS you can let a gradient move endlessly (based on the link in Michael's comment):

.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;
    }
}​

演示： a href =http://jsfiddle.net/jhogervorst/X78qN/2/ =noreferrer> http://jsfiddle.net/jhogervorst/X78qN/2/

Demo: http://jsfiddle.net/jhogervorst/X78qN/2/

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

This only works in WebKit-based browsers (e.g., Safari and Chrome). To make it work in other browsers as well, see Michael's link and copy some more CSS.

编辑：我必须完美。看到CSS3中一个几乎完美的Windows进度条的新演示：）

I had to make it perfect. See the new demo for an almost-perfect Windows progress bar in CSS3 :)

这篇关于在进度条中像在Windows 7中一样渐进移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！