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

代わりに、 repeating-linear-gradientを使用してみてください。

于 2013-08-30T11:16:24.023 に答える