1

HTML

<progress max="100" value="80"></progress>

CSS

progress[value]
{
    /* Reset the default appearence */
    -moz-appearance: none;
         appearance: none;

    /* Get rid of default border in Firefox and Opera. */
    border: none;

    /* Dimensions */
    width: 250px;
    height: 20px;  
}

progress[value]::-moz-progress-bar 
{ 
    background-image: -moz-linear-gradient( 135deg, 
                                            transparent 33%, 
                                            rgba(0, 0, 0, .1) 33%, 
                                            rgba(0, 0, 0, .1) 66%, 
                                            transparent 66% ),
                      -moz-linear-gradient( top, 
                                            rgba(255, 255, 255, .25), 
                                            rgba(0, 0, 0, .25) ),
                      -moz-linear-gradient( left, #09c, #f44 );

   border-radius: 2px; 
   background-size: 35px 20px, 100% 100%, 100% 100%;

   -moz-animation: animate-stripes 5s linear infinite;
        animation: animate-stripes 5s linear infinite;
}

@-moz-keyframes animate-stripes { 100% { background-position: 100px 0px; } }
     @keyframes animate-stripes { 100% { background-position: 100px 0px; } }

演示（仅在 Firefox 中打开此链接）

http://jsfiddle.net/pankajparashar/CQGQ9/

问题

我正在尝试通过更改背景位置在 Firefox 中使用 css3 关键帧为背景条纹设置动画。但是，这在 Firefox 中不起作用。上面的代码是仅为 Firefox 编写的简化测试用例。

4

0 回答 0