分类
WEB++技术

css3制作的进度条

http://hikola.com/?p=259

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta charset="utf-8" />
    <title>css3_progress_bar</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    body{background-color:#23272d;}
    .wrap{margin:200px auto;width:404px;}
    .progress_bar{padding:2px;width:400px;height:20px;background-color:#191d21;overflow:hidden;border-radius:12px;box-shadow:inset 0 1px 1px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.1);}
    .bar{height:20px;background-color:#7cb935;
    border-radius:10px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 10px 15px rgba(255,255,255,.3);
    background-size:40px 40px;
    background-image: -moz-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);
    background-image: -webkit-gradient(linear, 0 0, 100% 100%,
                                                                                                    color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
                                                                                                    color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
                                                                                                    color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
                                                                                                    to(transparent));
    background-image: -o-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);
    }
    .percentage{margin-bottom:5px;height:24px;font:12px/24px Georgia,simsun,sans-serif;text-align:center;color:#fff;text-shadow: rgba(0,0,0,1) 0 -1px 1px;}
    </style>
    </head>
    <body>
    <div class="wrap">
    <p class="percentage">36%</p>
    <div class="progress_bar"><div class="bar" style="width:36%"></div></div>
    </div>
    </body>
    </html>

unicac

...long long ago,he have a dream.

发表评论

邮箱地址不会被公开。 必填项已用*标注