如何用纯CSS编写一个实用的进度条

html-css0238

如何用纯CSS编写一个实用的进度条,第1张

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:#545965color:#fffpadding:15pxfloat:leftposition:relative-webkit-border-top-left-radius:5px-webkit-border-bottom-left-radius:5px-moz-border-radius-topleft:5px-moz-border-radius-bottomleft:5pxborder-top-left-radius:5pxborder-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:15pxdisplay:blockbackground:#45c9a5width:0border-radius:8px-webkit-transition:width .8s ease-moz-transition:width .8s easetransition:width .8s ease-webkit-animation:progressbar 7s infiniteanimation: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:15pxdisplay:blockbackground:#e74c3cwidth:0border-radius:8pxbackground-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 easetransition:width .8s ease-webkit-animation:progressbar 7s infiniteanimation:progressbar 7s infinite } 追踪 Tracker 8.最后产生动画效果 .track-wrap { position:relativetop:-18px-webkit-animation:progressbar2 7s infiniteanimation:progressbar2 7s infinite } .track { height:20pxdisplay:blockbackground:#e74c3cwidth:20pxborder-radius:10pxposition:relativeleft:-12px } @-webkit-keyframes progressbar2 { from { left:0 } to { left:100% } } /* Standard syntax */ @keyframes progressbar2 { from { left:0 } to { left:100% }

先一个例子，比如说下面这段代码：

<style type="text/css">

a:link {text-decoration:nonecolor:blue}

a:hover {text-decoration:underlinecolor:red}

a:active {text-decoration:nonecolor:yellow}

a:visited {text-decoration:nonecolor:green}

</style>

其效果是：未被点击时超链接文字无下划线，显示为蓝色；当鼠标放在链接上时有下划线，链接文字显示为红色；当点击链接时，即链接被激活，链接无下划线，显示为黄色；当点击链接后，也就是链接已被访问过后，链接无下划线，显示为绿色。

其中：

a:link 指正常的未被访问过的链接；

a:hover 指鼠标在链接上；

a:active 指正在点的链接；

a:visited 指已经访问过的链接。

参数设置：

text-decoration是文字修饰效果的意思；none参数表示超链接文字不显示下划线；underline参数表示超链接的文字有下划线；如果是overline则给超链接文字加上划线；换成line-through则是给超链接文字加上删除线；blink则使文字在闪烁。

color:blue，color:red等是给链接文字加颜色。

还可以添加其他参数，如：

font-weight:bold给链接文字加粗；font-size:16pt设置链接文字字体大小；background:#ffd306给链接文字加背景颜色；font-style:italic链接文字倾斜；border-bottom:1px dashed #51bfe0给链接文字加虚线，其中1px是虚线的粗细度，数值越大越粗，dashed表示虚线，#51bfe0是虚线颜色，如果要给链接文字加虚线的话，就不用加下划线了。

例如下面这两段代码：

<style type="text/css">

a:hover {text-decoration:noneborder-bottom:1px dashed red}

</style>

其效果是当鼠标放在链接上的时候链接出现红色虚下划线。

<style type="text/css">

a:hover {text-decoration:underlinefont-weight:boldcolor:redbackground:bluefont-style:italic}

</style>

其效果就是当鼠标放在链接上的时候，链接有下划线，字体加粗，链接文字为红色，背景为蓝色，文字倾斜。

如果要去掉所有链接的下划线则可以用下面这段代码：

<style type="text/css">

a:link,a:hover,a:active,a:visited{text-decoration:none}

</style>

参考：http://zrc870828.bokee.com/viewdiary.14711668.html