css响应式自适应图文时间线带滚动渐显动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：进度条
代码描述：css响应式自适应图文时间线带滚动渐显动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html>

<head>

    <title></title>

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>


        /*----------------------------------------------------------------------------------- */
        /*  Document Setup */
        /*----------------------------------------------------------------------------------- */
        * {
            outline: none !important;
        }

        body {
            font-family: "Source Sans Pro", sans-serif;
            color: black;
            background-color: #eef2f2;
            font-size: 15px;
            padding-bottom: 50px;
        }

        h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
            font-weight: 700;
        }
        h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small {
            font-size: 55%;
        }

        h1, .h1 {
            font-size: 60px;
            letter-spacing: -0.03em;
        }

        h2, .h2 {
            font-size: 30px;
        }

        h3, .h3 {
            font-size: 25px;
        }

        h4, .h4 {
            font-size: 20px;
        }

        h5, .h5 {
            font-size: 15px;
            font-weight: 400;
        }

        h6, .h6 {
            font-size: 13px;
            font-weight: 600;
        }

        p {
            margin-bottom: 15px;
        }

        .lead {
            font-weight: 300;
        }

        strong {
            font-weight: 700;
        }

        a {
            color: #32b9b1;
        }
        a:hover {
            color: #666666;
            text-decoration: none;
        }

        blockquote {
            border-color: #dddddd;
        }

        hr {
            border-color: #d0d0d0;
        }

        /*----------------------------------------------------------------------------------- */
        /*  Background color helper classes */
        /*----------------------------------------------------------------------------------- */
        .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-muted {
            color: white;
        }
        .bg-primary .page-header, .bg-success .page-header, .bg-info .page-header, .bg-warning .page-header, .bg-danger .page-header, .bg-muted .page-header {
            color: white;
        }

        .bg-primary {
            background-color: #32b9b1;
        }

        .bg-success {
            background-color: #51be38;
        }

        .bg-info {
            background-color: #5bc0de;
        }

        .bg-warning {
            background-color: #ef9544;
        }

        .bg-danger {
            background-color: #f05a5b;
        }

        .bg-muted {
            background-color: #bbbbbb;
        }

        /*----------------------------------------------------------------------------------- */
        /*  Buttons */
        /*----------------------------------------------------------------------------------- */
        .btn {
            border: 1px solid rgba(0, 0, 0, 0.25) !important;
            font-weight: 600;
        }
        .btn.active, .btn:active {
            box-shadow: none;
        }

        .btn-primary {
            background: #32b9b1;
        }
        .btn-primary:hover, .btn-primary.active, .btn-primary:focus {
            background: #2ea9a2;
        }

        .btn-success {
            background: #51be38;
        }
        .btn-success:hover, .btn-success.active, .btn-success:focus {
            background: #4aae33;
        }

        .btn-info {
            background: #5bc0de;
        }
        .btn-info:hover, .btn-info.active, .btn-info:focus {
            background: #4ab9db;
        }

        .btn-warning {
            background: #ef9544;
        }
        .btn-warning:hover, .btn-warning.active, .btn-warning:focus {
            background: #ed8a31;
        }

        .btn-danger {
            background: #f05a5b;
        }
        .btn-danger:hover, .btn-danger.active, .btn-danger:focus {
            background: #ee4748;
        }

        .btn-link {
            color: #32b9b1;
        }

        .btn-group.open .dropdown-toggle {
            box-shadow: none;
        }
        .btn-group.open .dropdown-toggle.btn-primary {
            background-color: #227d77;
            border-color: #227d77;
        }
        .btn-group.open .dropdown-toggle.btn-primary .caret {
            border-top-color: white;
        }
        .btn-group.open .dropdown-toggle.btn-success {
            background-color: #388327;
            border-color: #388327;
        }
        .btn-group.open .dropdown-toggle.btn-success .caret {
            border-top-color: white;
        }
        .btn-group.open .dropdown-toggle.btn-info {
            background-color: #28a1c5;
            border-color: #28a1c5;
        }
        .btn-group.open .dropdown-toggle.btn-info .caret {
            border-top-color: white;
        }
        .btn-group.open .dropdown-toggle.btn-warning {
            background-color: #d46e12;
            border-color: #d46e12;
        }
        .btn-group.open .dropdown-toggle.btn-warning .caret {
            border-top-color: white;
        }
        .btn-group.open .dropdown-toggle.btn-danger {
            background-color: #e81517;
            border-color: #e81517;
        }
        .btn-group.open .dropdown-toggle.btn-danger .caret {
            border-top-color: white;
        }

        .btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn, .btn-group .btn-group + .btn-group {
            margin-left: -2px;
        }
        .btn-group.open .dropdown-toggle {
            box-shadow: none;
        }

        /*----------------------------------------------------------------------------------- */
        /*  Nav pills */
        /*----------------------------------------------------------------------------------- */
        .nav-pills > li > a {
            font-weight: 600;
        }
        .nav-pills > li > a:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }

        .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
            background-color: #32b9b1;
        }

        /*----------------------------------------------------------------------------------- */
        /*  Dropdowns */
        /*----------------------------------------------------------------------------------- */
        .dropdown-menu {
            box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
            text-align: left;
        }
        .dropdown-menu > li > a {
            color: black;
            padding: 5px 12px 7px;
        }
        .dropdown-menu > li:first-child a {
            border: 0;
        }
        .dropdown-menu .divider {
            margin: 4px 0;
        }

        /*----------------------------------------------------------------------------------- */
        /*  Tables */
        /*----------------------------------------------------------------------------------- */
        .table thead tr th {
            font-weight: 700;
            background-color: rgba(255, 255, 255, 0.6) !important;
            color: black;
            border: 0;
            vertical-align: middle;
        }
        .table tbody {
            background-color: white;
        }
        .table tbody tr td {
            font-size: 14px;
            border-top: 0;
            vertical-align: middle;
        }
        .table tfoot > tr > td {
            border-top: 0;
        }
        .table tfoot > tr:first-child > td {
            border-top: 1px solid #dddddd;
            padding-top: 15px;
        }

        .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {
            background-color: rgba(0, 0, 0, 0.05);
        }

        .table > thead > tr > td.success, .table > tbody > tr > td.success, .table > tfoot > tr > td.success, .table > thead > tr > th.success, .table > tbody > tr > th.success, .table > tfoot > tr > th.success, .table > thead > tr.success > td, .table > tbody > tr.success > td, .table > tfoot > tr.success > td, .table > thead > tr.success > th, .table > tbody > tr.success > th, .table > tfoot > tr.success > th {
            background-color: #51be38;
            color: white;
        }

        .table > thead > tr > td.info, .table > tbody > tr > td.info, .table > tfoot > tr > td.info, .table > thead > tr > th.info, .table > tbody > tr > th.info, .table > tfoot > tr > th.info, .table > thead > tr.info > td, .table > tbody > tr.info > td, .table > tfoot > tr.info > td, .table > thead > tr.info > th, .table > tbody > tr.info > th, .table > tfoot > tr.info > th {
            background-color: #5bc0de;
            color: white;
        }

        .table > thead > tr > td.warning, .table > tbody > tr > td.warning, .table > tfoot > tr > td.warning, .table > thead > tr > th.warning, .table > tbody > tr > th.warning, .table > tfoot > tr > th.warning, .table > thead > tr.warning > td, .table > tbody > tr.warning > td, .table > tfoot > tr.warning > td, .table > thead > tr.warning > th, .table > tbody > tr.warning > th, .table > tfoot > tr.warning > th {
            background-color: #ef9544;
            color: white;
        }

        .table > thead > tr > td.danger, .table > tbody > tr > td.danger, .table > tfoot > tr > td.danger, .table > thead > tr > th.danger, .table > tbody > tr > th.danger, .table > tfoot > tr > th.danger, .table > thead > tr.danger > td, .table > tbody > tr.danger > td, .table > tfoot > tr.danger > td, .table > thead > tr.danger > th, .table > tbody > tr.danger > th, .table > tfoot > tr.danger > th {
            background-color: #f05a5b;
            color: white;
        }

        /*----------------------------------------------------------------------------------- */
        /*  Labels */
        /*----------------------------------------------------------------------------------- */
        .label-primary {
            background-color: #32b9b1;
        }

        .label-default {
            background-color: #bbbbbb;
        }

        .label-success {
            background-color: #51be38;
        }

        .label-info {
            background-color: #5bc0de;
        }

        .label-warning {
            background-color: #ef9544;
        }

        .label-danger {
            background-color: #f05a5b;
        }

        /*----------------------------------------------------------------------------------- */
        /*  List groups */
        /*----------------------------------------------------------------------------------- */
        .list-group .list-group-item.active, .list-group .list-group-item.active:hover, .list-group .list-group-item.active:focus {
            color: white;
            background-color: #32b9b1;
            border-color: #27918b;
        }
        .list-group .list-group-item.active .badge, .list-group .list-group-item.active:hover .badge, .list-group .list-group-item.active:focus .badge {
            color: #32b9b1;
            background-color: white;
        }

        a.list-group-item.active, a.list-group-item.active:hover, a.list-group-item.active:focus {
            background-color: #32b9b1;
            border-color: #32b9b1;
        }

        /*--------------------------------------------------.........完整代码请登录后点击上方下载按钮下载查看