css黑色自适应响应式大气后台仪表盘效果代码
代码语言:html
所属分类:响应式
代码描述:css黑色自适应响应式大气后台仪表盘效果代码,包含曲线图、圆环图、表格、左侧菜单、时间段选择等插件组合。
代码标签: css 黑色 自适应 响应式 大气 后台 仪表盘
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/pikaday.min.css">
<style>
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
body {
background: #1C1F2B;
color: #fff;
margin: 0px;
font-family: "Open Sans", sans-serif;
}
a {
color: #2196f3;
transition: color 200ms;
}
.shill {
position: fixed;
background-image: url("");
background-size: cover;
width: 40px;
height: 40px;
bottom: 15px;
right: 15px;
border-radius: 20px;
opacity: 0.4;
filter: blur(0.5px);
-webkit-filter: blur(0.5px);
transition: opacity 200ms, blur 200ms;
user-drag: none;
-webkit-user-drag: none;
}
.shill:hover {
opacity: 1;
filter: none;
box-shadow: 6px 6px 2px rgba(0, 0, 0, 0.6);
}
:root {
--background: #1C1F2B;
--primary: #2196f3;
--secondary: #1de9b6;
}
html {
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.15;
}
body {
display: flex;
justify-content: center;
padding-top: 50px;
line-height: 1.5;
font-size: 14px;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: inherit;
font-weight: 300;
line-height: 1.1;
}
h2 {
font-size: 32px;
}
h4 {
font-size: 24px;
}
hr {
border: none;
border-top: 1px solid #30354a;
}
.form-control {
background-color: #30354a;
color: #fff;
padding: 8px 12px;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
line-height: 1.25;
font-size: 14px;
font-family: inherit;
outline: none;
transition: box-shadow 200ms, border-color 200ms;
box-sizing: content-box;
}
.form-control:hover {
border-color: rgba(255, 255, 255, 0.3);
}
.form-control:focus {
border-color: transparent;
box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.8);
}
.form-control::placeholder, .form-control::-moz-placeholder {
color: rgba(255, 255, 255, 0.6);
opacity: 1;
}
.container {
display: flex;
max-width: 1100px;
}
.row {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
flex-shrink: 0;
}
.row:not(.fluid) {
margin: 0 -15px;
}
.row.top {
align-items: flex-start;
}
.col {
flex: 1 1 0px;
display: flex;
flex-direction: column;
padding: 0 15px;
}
.row.header {
margin-bottom: -15px;
}
.label span {
color: rgba(255, 255, 255, 0.6);
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 5px;
line-height: 13px;
}
canvas {
max-width: 100%;
}
.doughnut {
flex: 0 0 33.33333%;
text-align: center;
}
.doughnut .chart {
width: 75%;
margin: 0 auto 15px;
}
.doughnut strong {
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
}
.sparklines {
margin: -15px !important;
}
.sparkline {
flex-grow: 1;
width: 25%;
padding: 0;
}
.sparkline .label {
padding: 0 15px;
}
.sparkline .label span {
color: rgba(255, 255, 255, 0.6);
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
}
.sparkline .label h2 {
font-size: 2rem;
}
.sparkline .chart {
padding: 15px;
}
.sparkline .chart-container {
height: 70px;
}
.list {
display: flex;
flex-direction: column;
margin-bottom: 1rem;
width: 100%;
background: transparent;
}
.list > * {
border: 1px solid #30354a;
margin-bottom: -1px;
}
.list h6 {
padding: 1rem 1.25rem;
}
.list a {
position: relative;
padding: 0.75rem 1.25rem;
width: 100%;
display: flex;
justify-content: space-between;
box-sizing: border-box;
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
font-size: 14px;
line-height: 1.5;
}
.list a .progress {
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: -1;
display: block;
background-color: #171923;
border-radius: inherit;
}
.list a span:last-child {
color: rgba(255, 255, 255, 0.6);
}
.list a:hover, .list a:focus {
background: #30354a;
}
.list a:active {
background: #2196f3;
color: #1C1F2B;
}
.list a:active span:last-child {
color: #1C1F2B;
}
.list > :first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.list > :last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.list + a {
align-self: flex-start;
font-size: 14px;
line-height: 18px;
margin-bottom: 30px;
}
.btn {
display: inline-block;
text-decoration: none;
background: transparent;
border-radius: 4px;
padding: 8px 16px;
transition: background 200ms, color 200ms;
}
.btn.primary {
color: #2196f3;
border: 1px solid #2196f3;
}
.btn.primary:hover {
background: #2196f3;
color: #fff;
}
.divider {
position: relative;
font-size: 12px;
text-transform: uppercase;
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
}
.divider h3 {
position: relative;
display: inline-block;
vertical-align: middle;
background-color: #1C1F2B;
color: rgba(255, 255, 255, 0.6);
padding: 0 12px;
}
.divider::before {
position: absolute;
top: 50%;
display: block;
content: "";
width: 100%;
height: 1px;
background-color: #30354a;
}
nav {
display: flex;
flex-direction: column;
margin-right: 40px;
}
nav .header {
display: flex;
justify-content: space-between;
box-sizing: border-box;
min-width: 360px;
padding-bottom: 20px;
line-height: 37px;
}
nav .brand {
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0