1

我正在尝试像这样编写进度条。

http://www.red-team-design.com/stylish-css3-progress-bars

（第一个，有条纹）

问题说明

当我编辑我的进度条（我自己的颜色、宽度、删除的动画等）时，它看起来不平滑，看起来参差不齐。

这是屏幕截图：

这是实时预览：

http://tvojaskola.eu/test.html


HTML 代码：

<div class="col-2"><div class="progress-bar blue stripes">
    <span style="width: 60%"></span>
</div> 
</div>

CSS 代码：

.progress-bar {
  background-color: rgba(236,236,236,1);
    height: 25px;
    width: 60%;
    margin-bottom: 30px;            
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;  
}
.progress-bar span {
  float: left;
    display: inline-block;
    height: 100%;   
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;  
}
.blue span {
    background-color: #224b8f;   
}
.stripes span {
    -webkit-background-size: 10px 10px;
    -moz-background-size: 10px 10px;
    background-size: 10px 10px;         
    background-image: -webkit-gradient(linear, left top, right bottom,
                        color-stop(.25, rgba(236, 236, 236, 1)), color-stop(.25, transparent),
                        color-stop(.5, transparent), color-stop(.5, rgba(236, 236, 236, 1)),
                        color-stop(.75, rgba(236, 236, 236, 1)), color-stop(.75, transparent),
                        to(transparent));
    background-image: -webkit-linear-gradient(135deg, rgba(236, 236, 236, 1) 25%, transparent 25%,
                        transparent 50%, rgba(236, 236, 236, 1) 50%, rgba(236, 236, 236, 1) 75%,
                        transparent 75%, transparent);
    background-image: -moz-linear-gradient(135deg, rgba(236, 236, 236, 1) 25%, transparent 25%,
                        transparent 50%, rgba(236, 236, 236, 1) 50%, rgba(236, 236, 236, 1) 75%,
                        transparent 75%, transparent);
    background-image: -ms-linear-gradient(135deg, rgba(236, 236, 236, 1) 25%, transparent 25%,
                        transparent 50%, rgba(236, 236, 236, 1) 50%, rgba(236, 236, 236, 1) 75%,
                        transparent 75%, transparent);
    background-image: -o-linear-gradient(135deg, rgba(236, 236, 236, 1) 25%, transparent 25%,
                        transparent 50%, rgba(236, 236, 236, 1) 50%, rgba(236, 236, 236, 1) 75%,
                        transparent 75%, transparent);
    background-image: linear-gradient(135deg, rgba(236, 236, 236, 1) 25%, transparent 25%,
                        transparent 50%, rgba(236, 236, 236, 1) 50%, rgba(236, 236, 236, 1) 75%,
                        transparent 75%, transparent);            
}

有任何想法吗？多谢你们。

4

2 回答 2

0

尝试改用重复线性渐变。

于 2013-08-30T11:16:24.023 回答
0

您可以查看引导进度条

http://twitter.github.com/bootstrap/getting-started.html

我认为他们甚至有 javascript 你可以用来让它自己移动

于 2013-08-30T12:22:04.720 回答