css如何改变进度条的样式

html-css018

css如何改变进度条的样式,第1张

css如何改变进度条的样式有两步。

1、通过webkitscrollbar属性设置滚动条整体部分。

2、通过webkitscrollbarbutton属性设置滚动条两端的按钮。

1、写一个样式为.containe的div用来包含进度条，其次是用样式为.title的div来包裹标题。

 

2、接下来，添加样式为.bar的di来包含填充和未填充的进度条样式。最后，在.bar里添加样式为.bar-unfill

和.bar-fill的span标签。

Plain

 

3.简单的进度条的CSS代码.container 类里将 width 定义为 30% 使进度条能够自适应。放一些简单的 border-radius 之类的属性在我们的 .title 类里以修改顶部和底部的左边的边框弧度，创建一个简单明了的平板式设计。

.container {

width:30%

margin:0 auto

}

.title {

background:#545965

color:#fff

padding:15px

float:left

position:relative

-webkit-border-top-left-radius:5px

-webkit-border-bottom-left-radius:5px

-moz-border-radius-topleft:5px

-moz-border-radius-bottomleft:5px

border-top-left-radius:5px

border-bottom-left-radius:5px

}

4.首先建一个白色的背景

.bar-unfill {height:15pxdisplay:blockbackground:#fffwidth:100%border-radius:8px}

5.定义进度条的样式，先令他的宽度为 100% ，因为这也会应用于定义和未定义的部分。所以在我们的 .bar-fill 的类里，令他的宽度为 0 作为起始的宽度，添加CSS3的 transition 属性使动画效果更加流畅，最后，我们将添加CSS3里的 animation 属性，定义动画的名字，和 duration 和 animation-iteration-count 属性。

.bar-fill {

height:15px

display:block

background:#45c9a5

width:0

border-radius:8px

-webkit-transition:width .8s ease

-moz-transition:width .8s ease

transition:width .8s ease

-webkit-animation:progressbar 7s infinite

animation:progressbar 7s infinite

}

6.使用CSS3里的 @keyframe 规则来设置宽度从 0 变化到 100% 。你也能定制你自己喜欢的变化。

@-webkit-keyframes progressbar { 

from {

width:0

}

to {

width:100%

}

}

/* Standard syntax */

@keyframes progressbar {

from {

width:0

}

to {

width:100%

}

}

7.条纹进度条，应该把 .bar-fill 重新命名为 .bar-fill-stripes 。使用 backgrou-image 属性里的 linear-gradient 同时声明它的颜色。剩余的CSS3动画效果也是和上述相同，看下面的代码：

.bar-fill-stripes {

height:15px

display:block

background:#e74c3c

width:0

border-radius:8px

background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2)   50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent)

-webkit-transition:width .8s ease

-moz-transition:width .8s ease

transition:width .8s ease

-webkit-animation:progressbar 7s infinite

animation:progressbar 7s infinite

}

追踪

Tracker

8.最后产生动画效果

.track-wrap {

position:relative

top:-18px

-webkit-animation:progressbar2 7s infinite

animation:progressbar2 7s infinite

}

.track {

height:20px

display:block

background:#e74c3c

width:20px

border-radius:10px

position:relative

left:-12px

}

@-webkit-keyframes progressbar2 {

from {

left:0

}

to {

left:100%

}

}

/* Standard syntax */

@keyframes progressbar2 {

from {

left:0

}

to {

left:100%

}