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;
        }

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