一个非常酷的进度条，实现简单。加入精华？


答案：<html>
<head>
<style type="text/css">

body {
    background:    000000;
    font:        MessageBox;
    font:        Message-Box;
}

marquee {
    border:        1px solid ButtonShadow;
    background:    333333;
    height:        12px;
    font-size:    1px;
    margin:        1px;
    width:        400px;
    -moz-binding:    url("marquee-binding.xml#marquee");
    -moz-box-sizing:    border-box;
    display:        block;
    overflow:        hidden;
}

marquee span {
    height:            8px;
    margin:            1px;
    width:            6px;
    background:        ff9900;
    float:            left;
    font-size:        1px;
}

.progressBarHandle-0 {
    filter:        alpha(opacity=20);
    -moz-opacity:    0.20;
}

.progressBarHandle-1 {
    filter:        alpha(opacity=40);
    -moz-opacity:    0.40;
}

.progressBarHandle-2 {
    filter:        alpha(opacity=60);
    -moz-opacity:    0.6;
}

.progressBarHandle-3 {
    filter:        alpha(opacity=80);
    -moz-opacity:    0.8;
}

.progressBarHandle-4 {
    filter:        alpha(opacity=100);
    -moz-opacity:    1;    
}


.progressBarHandle-5 {
    filter:        alpha(opacity=100);
    -moz-opacity:    1.2;    
}

.progressBarHandle-6 {
    filter:        alpha(opacity=100);
    -moz-opacity:    1.4;    
}

.progressBarHandle-7 {
    filter:        alpha(opacity=100);
    -moz-opacity:    1.8;    
}
.progressBarHandle-8 {
    filter:        alpha(opacity=100);
    -moz-opacity:    2;    
}
.progressBarHandle-9 {
    filter:        alpha(opacity=100);
    -moz-opacity:    2.2;    
}



</style>
</head>
<body>
<center><marquee direction="right" scrollamount="8" scrolldelay="100">
    <span class="progressBarHandle-0"></span>
    <span class="progressBarHandle-1"></span>
    <span class="progressBarHandle-2"></span>
    <span class="progressBarHandle-3"></span>
    <span class="progressBarHandle-4"></span>
    <span class="progressBarHandle-5"></span>
    <span class="progressBarHandle-6"></span>
    <span class="progressBarHandle-7"></span>
    <span class="progressBarHandle-8"></span>
    <span class="progressBarHandle-9"></span>

</marquee>
</center>
</body>
</html>
上一个：控制你的弹出窗口只弹出一次
下一个：一个很好的效果，隐藏表格
更多图片编程知识: