HTML5+CSS3 打造个性进度条一

来源：互联网发布：java 树结构 treenode 编辑：程序博客网时间：2024/04/29 21:27

CSS3的新特性为我们实现漂亮的进度条扫清了障碍，我们可以完全不需要任何图片和简单的Javascript代码就可以构建。

本例以chrome浏览器下效果为准

一、第一个例子

效果图：

1、基本的HTML

HTML代码非常简单：

<body style='margin:100px 10px;'><div style=" width:360px; margin:0 auto"><div class="progress-bar blue stripes"><span style="width: 40%"></span></div></div></body>

2、 CSS代码

    <style>        body {            background: #222 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAFVBMVEUqKiopKSkoKCgjIyMuLi4kJCQtLS0dJckpAAAAO0lEQVR42iXLAQoAUQhCQSvr/kfe910jHIikElsl5qVFa1iE5f0Pom/CNZdbNM6756lQ41NInMfuFPgAHVEAlGk4lvIAAAAASUVORK5CYII=");         }/*---------------------------*/               .progress-bar {            background-color: #1a1a1a;            height: 25px;            padding: 5px;            width: 350px;            margin: 70px 0 20px 0;            -moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;            -moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;-webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;                   }                .progress-bar span {            display: inline-block;            height: 100%;background-color: #777;            transition: width .4s ease-in-out;border-radius: 3px;box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;            -webkit-border-radius: 3px;-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;-webkit-transition: width .4s ease-in-out;-ms-transition: width .4s ease-in-out;-o-transition: width .4s ease-in-out;-moz-transition: width .4s ease-in-out;-moz-border-radius: 3px;-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;        }/*---------------------------*/        .blue span {            background-color: #34c2e3;           }/*---------------------------*/.stripes span {            -webkit-background-size: 30px 30px;                        background-size: 30px 30px;background-image: -webkit-gradient(linear, left top, right bottom,color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),to(transparent));            background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,                                transparent 75%, transparent);-moz-animation: animate-stripes 3s linear infinite;  -webkit-animation: animate-stripes 3s linear infinite;/* chrome safri */-moz-background-size: 30px 30px;            background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,                                transparent 75%, transparent);            background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,                                transparent 75%, transparent);            background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,                                transparent 75%, transparent);            background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,                                transparent 75%, transparent);                                                     }                @-webkit-keyframes animate-stripes { 0% {background-position: 0 0;} 100% {background-position: 60px 0;}        }        @-moz-keyframes animate-stripes {0% {background-position: 0 0;} 100% {background-position: 60px 0;}        }    </style>

HTML5+CSS3 打造个性进度条 一

HTML5+CSS3 打造个性进度条一