纯css实现一个立体圆润进度条效果代码-html代码-BFW代码库

纯css实现一个立体圆润进度条效果代码

代码语言：html

所属分类：进度条

代码描述：纯css实现一个立体圆润进度条效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <style>
        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed,
        figure, figcaption, footer, header, hgroup,
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }

        article, aside, details, figcaption, figure,
        footer, header, hgroup, menu, nav, section {
            display: block;
        }

        body {
            line-height: 1;
        }

        ol, ul {
            list-style: none;
        }

        blockquote, q {
            quotes: none;
        }

        blockquote:before, blockquote:after,
        q:before, q:after {
            content: '';
            content: none;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        .about {
            margin: 80px auto;
            padding: 8px;
            width: 260px;
            font: 10px/18px "Lucida Grande", Tahoma, Verdana, sans-serif;
            color: #bbb;
            text-align: center;
            text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
            background: #333;
            background: rgba(34, 34, 34, 0.75);
            border-radius: 4px;
            -webkit-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 6px rgba(0, 0, 0, 0.4);
            box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 6px rgba(0, 0, 0, 0.4);
            background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
            background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
            background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
            background-image: linear-gradient(tobottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
        }
        .about a {
            color: #eee;
            text-decoration: none;
            border-radius: 2px;
            -webkit-transition: 0.1s;
            -moz-transition: 0.1s;
            -o-transition: 0.1s;
            transition: 0.1s;
        }
        .about a:hover {
            text-decoration: none;
            background: #555;
            background: rgba(255, 255, 255, 0.15);
        }

        .about-links {
            height: 30px;
        }
        .about-links a {
            float: left;
            width: 50%;
            line-height: 30px;
            font-size: 12px;
        }

        .about-author {
            margin-top: 5px;
        }
        .about-author a {
            padding: 1px 3px;
            margin: 0 -1px;
        }

        /*
 * Copyright (c) 2012-2013 Thibaut Courouble
 * http://www.webinterfacelab.com
 *
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 */
        body {
            font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
            color: #404040;
            background: #fafafa;
        }

        .container {
            margin: 50px auto;
            width: 640px;
        }
        .container > div {
            margin-bottom: 20px;
        }

        .progress {
            height: 20px;
            background: #ebebeb;
            border-left: 1px solid transparent;
            border-right: 1px solid transparent;
            border-radius: 10px;
        }
        .progress > span {
            position: relative;
            float: left;
            margin: 0 -1px;
            min-width: 30px;
            height: 18px;
            line-height: 16px;
            text-align: right;
            background: #cccccc;
            border: 1px solid;
            border-color: #bfbfbf #.........完整代码请登录后点击上方下载按钮下载查看