css响应式自适应图文时间线带滚动渐显动画效果代码
代码语言: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;
}
/*--------------------------------------------------.........完整代码请登录后点击上方下载按钮下载查看
网友评论0